美文网首页
ant-design-vue联合indexedDB数据库导出EX

ant-design-vue联合indexedDB数据库导出EX

作者: Prince_0716 | 来源:发表于2022-02-04 14:18 被阅读0次

第一步

添加导出按钮

<a-button type="primary" @click="exportData">导出数据</a-button>

第二步

将数据转化为 xlsx 规定的格式

    transData(columns, tableList) {
      const obj = columns.reduce((acc, cur) => {
        if (!acc.titles && !acc.keys) {
          acc.titles = [];
          acc.keys = [];
        }
        acc.titles.push(cur.title);
        acc.keys.push(cur.dataIndex);
        return acc;
      }, {});
      const tableBody = tableList.map((item) => {
        return obj.keys.map((key) => item[key]);
      });
      return [obj.titles, ...tableBody];
    },

第三步

设置导出Excel函数

exportData() {
      const tableData = this.transData(this.columns, this.list);
      console.log(tableData);
      // 将一组 JS 数据数组转换为工作表
      const ws = XLSX.utils.aoa_to_sheet(tableData);
      // 创建 workbook
      const wb = XLSX.utils.book_new();
      // 将 工作表 添加到 workbook
      XLSX.utils.book_append_sheet(wb, ws, "Sheet1");
      // 将 workbook 写入文件
      XLSX.writeFile(wb, "table.xlsx");
    },

相关文章

网友评论

      本文标题:ant-design-vue联合indexedDB数据库导出EX

      本文链接:https://www.haomeiwen.com/subject/npgjkrtx.html