Export to csv in jQuery

by

You can do that in the client side only, in browser that accept Data URIs:

data:application/csv;charset=utf-8,content_encoded_as_url

In your example the Data URI must be:

data:application/csv;charset=utf-8,Col1%2CCol2%2CCol3%0AVal1%2CVal2%2CVal3%0AVal11%2CVal22%2CVal33%0AVal111%2CVal222%2CVal333

You can call this URI by:

  • using window.open
  • or setting the window.location
  • or by the href of an anchor
  • by adding the download attribute it will work in chrome, still have to test in IE.

To test, simply copy the URIs above and paste in your browser address bar. Or test the anchor below in a HTML page:

<a download="somedata.csv" href="data:application/csv;charset=utf-8,Col1%2CCol2%2CCol3%0AVal1%2CVal2%2CVal3%0AVal11%2CVal22%2CVal33%0AVal111%2CVal222%2CVal333">Example</a>

To create the content, getting the values from the table, you can use table2CSV and do:

var data = $table.table2CSV({delivery:'value'});

$('<a></a>')
    .attr('id','downloadFile')
    .attr('href','data:text/csv;charset=utf8,' + encodeURIComponent(data))
    .attr('download','filename.csv')
    .appendTo('body');

$('#downloadFile').ready(function() {
    $('#downloadFile').get(0).click();
});

Most, if not all, versions of IE don’t support navigation to a data link, so a hack must be implemented, often with an iframe. Using an iFrame combined with document.execCommand('SaveAs'..), you can get similar behavior on most currently used versions of IE.

More Related Contents:

  1. How to do the same in JavaScript? [closed]
  2. jQuery $(document).ready and UpdatePanels?
  3. Change the selected value of a drop-down list with jQuery
  4. how to parse a “dd/mm/yyyy” or “dd-mm-yyyy” or “dd-mmm-yyyy” formatted date string using JavaScript or jQuery [duplicate]
  5. Ajax request returns 200 OK, but an error event is fired instead of success
  6. How to do a Jquery Callback after form submit?
  7. make iframe height dynamic based on content inside- JQUERY/Javascript
  8. Best way to get all selected checkboxes VALUES in jQuery [duplicate]
  9. Accessing Asp.net controls using jquery (all options)
  10. Verify External Script Is Loaded
  11. How can I validate google reCAPTCHA v2 using javascript/jQuery?
  12. jQuery returning “parsererror” for ajax request
  13. TypeError: $(…).DataTable is not a function
  14. How can I make window.showmodaldialog work in chrome 37?
  15. Calling ASP.NET Code Behind function from JavaScript
  16. jQuery DataTables server-side processing using ASP.NET WebForms
  17. Uploading File using Ajax in Asp.Net Core
  18. Iframe.readyState does not work in chrome
  19. Emailing to multiple recipients with html Mailto: not working
  20. Submit form using AJAX in Asp.Net mvc 4
  21. ASP.NET Parse DateTime result from ajax call to javascript date
  22. how to convert xml to json using jquery
  23. jQuery addClass onClick
  24. focus on next tabindex of HTML element onEnter keypress by JQuery
  25. How to prevent a click on a ‘#’ link from jumping to top of page?
  26. Retrieving file names out of a multi-file upload control with javascript
  27. submit event does not fire if submit initiated programmatically
  28. closure inside a for loop – callback with loop variable as parameter [duplicate]
  29. let user scrolling stop jquery animation of scrolltop?
  30. Hot to get incomplete datetime-local input values

Leave a Comment