在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
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。