vue中导出csv格式的数据

1.npm install papaparse
2.在需要的页面导入 import Papa from ‘papaparse’
3. data: function() {
return {
isShowLast: false,
tableData: [],
itemList: [
{
name: “红木”,
type: “P000001”,
price: “￥88888”
},
{
name: “水杉”,
type: “P000002”,
price: “￥2000”
}
]
};
},
methods: {
download() {
console.log(“downLoad”);
var csv = Papa.unparse(this.itemList);
console.log(“downLoad”, csv);
//定义文件内容，类型必须为Blob 否则createObjectURL会报错
let content = new Blob([csv]);
//生成url对象
let urlObject = window.URL || window.webkitURL || window;
let url = urlObject.createObjectURL(content);
//生成DOM元素
let el = document.createElement(“a”);
//链接赋值
el.href = url;
el.download = “todo文件导出.cvs”;
//必须点击否则不会下载
el.click();
//移除链接释放资源
urlObject.revokeObjectURL(url);
}
}
补充： 上述方法可以实现功能，但是使用excel打开文件时，中文会乱码解决方法
上述斜体加粗部分改为let content = new Blob(["\uFEFF" + csv])即可
遇到的坑：导出的数据可以是数组中包含数组，数组中包含对象，也可以是json类型。但是数组中或者对象中的数据类型需要统一，如果既有复杂数据类型又有简单数据类型，导出会有问题,具体数据类型参考papaparse官方文档

导出数据时遇到的问题，后台已经设置下载的时候不允许直接打开，但是每次下载数据会直接打开，此时，可以打开浏览器设置，进入高级设置，删除自动打开某些类型的文件即可。