在vue中导出csv文件
2023-12-13 04:25:44
在Vue中使用 xlsx
库将表格数据导出为CSV文件,你需要按照以下步骤操作:
安装 xlsx
库
如果你的项目中还没有安装xlsx
库,可以使用npm或yarn来安装它。
npm install xlsx
# 或者
yarn add xlsx
在Vue组件中导入xlsx
库:
在需要处理CSV文件的组件中,导入xlsx
库。
import * as XLSX from 'xlsx';
将数组导出成CSV
<template>
<button @click="exportToCsv">导出 CSV</button>
</template>
<script>
import * as XLSX from 'xlsx';
export default {
data() {
return {
tableData: [
{ id: 1, name: 'Alice', age: 24 },
{ id: 2, name: 'Bob', age: 22 },
]
};
},
methods: {
exportToCsv() {
// 将数据转换为工作表
const ws = XLSX.utils.json_to_sheet(this.tableData);
// 创建新的工作簿并添加工作表
const wb = XLSX.utils.book_new();
XLSX.utils.book_append_sheet(wb, ws, "Sheet1");
// 导出工作簿
XLSX.writeFile(wb, 'tableData.csv');
}
}
};
</script>
文章来源:https://blog.csdn.net/qq_45503196/article/details/134800398
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。 如若内容造成侵权/违法违规/事实不符,请联系我的编程经验分享网邮箱:veading@qq.com进行投诉反馈,一经查实,立即删除!
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。 如若内容造成侵权/违法违规/事实不符,请联系我的编程经验分享网邮箱:veading@qq.com进行投诉反馈,一经查实,立即删除!