美文网首页
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