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

Question

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 ?

Answer 1

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.