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官方文档

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

猜你喜欢

转载自blog.csdn.net/wangdong9395/article/details/107880799