javascriptvue.jsexport

Export data of table in CSV, Excel, PDF format in VueJs

I am working on vueJs template and I need to export data of tables in three formats which are .pdf, .csv, .xls I tried with this question but its show Utils undefined. so how can I achieve what I want ?

Solution

  • Easy way

    If you can use different table component try to look into Vue materialize datatable

    It's letting you to export in XLS and print to PDF

    Without any component

    The way I personally use If i need to export any JSON that is consist of more fields than there are in the actual table:

    https://www.papaparse.com/

    import Papa from "papaparse";

    var blob = new Blob([Papa.unparse(jsonData)], { type: 'text/csv;charset=utf-8;' });

var link = document.createElement("a");

var url = URL.createObjectURL(blob);
link.setAttribute("href", url);
link.setAttribute("download", 'filename.csv');
link.style.visibility = 'hidden';
document.body.appendChild(link);
link.click();
document.body.removeChild(link);

    So, we actually unparsing JSON data into the blob, creating dynamic element which linked to it and downloading the file.