关于excel:在vue中导出多sheet的方案-二

以前文章文章介绍了如何导出单列的 excel
本篇文章介绍下多 sheet 的 excel 的导出
首先给大家看下成果

从上图可知，根底信息的数据格式和其余两个 sheet 不一样，所以要独自解决

依据现有的数据组装 xlsx 插件所需数据结构

• 页面数据

这里以我罕用数据为例

    // 根底数据个别是一个一般的对象
    let valueObj = {
        registerNo: '',  // 洽购单号
        statusName: '',  // 状态
        submitDate: '',  // 提交工夫
        // 等等
    }
    // 第一个表格数据
    const tableHeader = tableHeader: [
      {
        title: "物料编码",
        map: "materialCode",
      },
      {
        title: "物料类型",
        map: "materialTypeName",
      },
      {
        title: "物料名称",
        map: "materialName",
      },
      {
        title: "规格型号",
        map: "materialModel",
      },
    ]
    const tableData = [
      {
        materialCode: 'a',
        materialTypeName: 'b',
        materialName: 'b',
        materialModel: 'b',
      },
      {
        materialCode: 'a',
        materialTypeName: 'b',
        materialName: 'b',
        materialModel: 'b',
      }
    ]
    // 其余的表格数据同上  
    

• 组装数据

    let data = {
        title: "洽购单", // 文件名称
        baseSheetName: "根底信息",  
        baseSheetData: [
          {
            label: "洽购单号",
            map: "registerNo",
            value: "",
          },
          {
            label: "以后状态",
            map: "registerStatusName",
            value: "",
          },
          // 等等
        ], // 寄存根底数据
        list: [
          {
            sheetName: '汇总', // 第一个 sheet 数据 
            tableHeader: [
              {
                title: "物料编码",
                map: "materialCode",
              },
              {
                title: "物料类型",
                map: "materialTypeName",
              },
              
            ],
            tableData: [
              {
                materialCode: 'a',
                materialTypeName: 'b',
                materialName: 'b',
                materialModel: 'b',
              },
              {
                materialCode: 'a',
                materialTypeName: 'b',
                materialName: 'b',
                materialModel: 'b',
              }
            ]
          },
          {
            sheetName: '明细',
            tableHeader: [  // 第二个 sheet 数据 
              {
                title: "物料编码",
                map: "materialCode",
              },
              {
                title: "物料类型",
                map: "materialTypeName",
              },
              {
                title: "物料名称",
                map: "materialName",
              },
              {
                title: "规格型号",
                map: "materialModel",
              },
              {
                title: "物料阐明",
                map: "materialIllustrate",
              },
            ],
            tableData: [
              {
                materialCode: 'a',
                materialTypeName: 'b',
                materialName: 'b',
                materialModel: 'b',
              },
              {
                materialCode: 'a',
                materialTypeName: 'b',
                materialName: 'b',
                materialModel: 'b',
              }
            ]
          }
        ], // 其余 sheet 数据
      }

• 导出函数封装

import * as XLSX from "xlsx/xlsx.mjs"
function exportExcel(data) {var wb = XLSX.utils.book_new()
    // 解决根底数据
    if (data.baseSheetName) {let baseDataArr = []
        data.baseSheetData.map(item => {
          baseDataArr.push({[data.title]: item.label,
            '': item.value
          })
        })
        let fdXslxws = XLSX.utils.json_to_sheet(baseDataArr)
        XLSX.utils.book_append_sheet(wb, fdXslxws, data.baseSheetName)
    }
    // 解决其余表格数据
    data.list.map((item, index) => {let arr = []
        let newHeaderObj = {}
        item.tableHeader.map(item => {newHeaderObj[item.map] = item.title
        })
        item.tableData.map((el, idx) => {let obj = {}
          for (let x in newHeaderObj) {obj[newHeaderObj[x]] = el[x]
          }
          arr.push(obj)
        })
        let fdXslxws = XLSX.utils.json_to_sheet(arr)
        XLSX.utils.book_append_sheet(wb, fdXslxws, item.sheetName)
    })
    XLSX.writeFile(wb, data.title + ".xlsx")
}

至此一个简略导出多列 sheet 的 excel 性能就实现了。。。