XLSX实现分页导出json数据

最新推荐文章于 2024-04-09 16:12:35 发布

原创

最新推荐文章于 2024-04-09 16:12:35 发布 · 358 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#json #javascript #前端

这段代码展示了如何在Vue项目中利用XLSX库来创建并导出多页Excel文件，每页包含不同的数据。它首先定义了工作簿和工作表，然后遍历数据并将其格式化为适合Excel的格式，最后将所有内容写入文件。导出的数据来源于名为`testData`的数组，该数组包含了四个CH列表，每个列表包含多个测试数据对象。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.使用XLSX前先安装，在vue文件引用


<div class="dialog-footer" style="text-align: center;padding: 4px 0;">
    <el-button @click="excelData" type="primary">导出</el-button>
</div>


import * as XLSX from 'xlsx'

 methods: {
    // 导出excel
    excelData() {
      try {
        const nowTime = formatDate(new Date(), 'yyyy-MM-dd hh:mm:ss')
        const filename = `智能测试数据${nowTime}.xlsx`

        const workbook = XLSX.utils.book_new(); // 创建工作簿

        for (let i = 0; i < 4; i++) {
          const data = {
            sheetName: 'CH' + (i + 1),// 分页名称
            // 导出excel的表头
            tHeader: ['序号', '工步名称', '电流(A)', '电压(V)', '协议', '模式', '测试电流(A)', '测试电压(V)', '测试范围(V)', '测试结果(V)', '测试时间'],
            // filterVal 与中文表头对应对象属性名称
            filterVal: ['num', 'name', 'writeElectricity', 'writeVoltage', 'protocol', 'mode', 'electricity', 'voltage', 'scope', 'results', 'testDate'],
            list: this.testData[i].printData
          };

          const formattedData = this.formatJson(data.filterVal, data.list);
          const worksheetData = [data.tHeader, ...formattedData]; // 添加标题行和数据行
          const worksheet = XLSX.utils.aoa_to_sheet(worksheetData); // 创建工作表
          XLSX.utils.book_append_sheet(workbook, worksheet, data.sheetName) // 将工作表添加到工作簿
        }

        XLSX.writeFile(workbook, filename); // 导出Excel文件
      } catch (error) {
        console.log(error)
      }
    },
    formatJson(filterVal, jsonData) {
      return jsonData.map(v => filterVal.map(j => v[j]))
    }
}

2.导出数据为

chList: [
          {
              label: "CH1",
              name: "first",
              tableDatas: [
                  {
                      name: "PD5V1A",
                      protocol: 3,
                      currentPro: 3,
                      tabPosition: "CC",
                      voltage: "5.0",
                      decoyVoltage: "5.0",
                      electricity: "1.0",
                      upLimit: "5.5",
                      lowerLimit: "4.5",
                      isStart: false,
                      testval: "0",
                      scope: "4.5~5.5",
                      time: "0",
                      timeout: "0"
                  },
                  {
                      name: "PD9V1A",
                      protocol: 3,
                      currentPro: 3,
                      tabPosition: "CC",
                      voltage: "9.0",
                      decoyVoltage: "9.0",
                      electricity: "1.0",
                      upLimit: "9.5",
                      lowerLimit: "8.5",
                      isStart: false,
                      testval: "0",