在VueJs中以CSV、Excel和PDF格式导出表格数据

Question

我正在处理vueJs模板，需要将表格数据导出为三种格式：.pdf、.csv和.xls。我尝试使用这个问题，但是它显示Utils未定义。那么我该如何实现我的目标呢？

- Varinder Sohal

Answer 1

简单方法

如果你可以使用不同的表格组件，可以尝试查看Vue materialize datatable。

可以让您导出为XLS并打印为PDF。

没有任何组件

我个人使用的方法是：如果需要导出任何包含比实际表格中的字段更多的JSON数据：

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);

因此，我们实际上将JSON数据解析为Blob，创建动态元素并链接到它，并下载文件。

- Justice47

---

有关如何为此编写单元测试的建议吗？ - Tom

@Tom 抱歉，这个还没有写单元测试。 - Justice47