vue2两层数据导出为excle

Question

数据格式是这种两层的josn，现在要把这个数据导出为excle，导出成多表，每张表一组数据，要有第一层的siteName，和factorEffectivenessList对象里的内容，目前没有思路，请教一下

Answer 1

以下参考免费微信小程序：皆我百晓生 作答，并由妄北y整理回复。

要将Vue.js中的两层JSON数据导出为Excel，你可以使用JavaScript的一些库来实现。下面是一种可能的实现方法，它使用xlsx库来生成Excel文件，以及file-saver库来触发文件下载。

首先，你需要安装这两个库（如果尚未安装的话）：

npm install xlsx file-saver

然后，你可以使用以下步骤来实现数据导出功能：

1. 准备你的数据。
2. 使用xlsx库创建一个工作簿（Workbook）和工作表（Worksheet）。
3. 将第一层数据写入工作表的第一行。
4. 遍历factorEffectivenessList数组，将每个因素的数据写入工作表的后续行。
5. 使用file-saver库触发文件下载。

以下是一个示例代码：

<template>
  <div>
    <!-- 你的Vue组件内容 -->
    <button @click="exportToExcel">导出为Excel</button>
  </div>
</template>

<script>
import * as XLSX from 'xlsx';
import FileSaver from 'file-saver';

export default {
  data() {
    return {
      // 假设这是从API获取的数据
      sites: [
        {
          siteId: 1,
          siteName: '点位1',
          factorEffectivenessList: [
            {
              factorName: '氯氮',
              count: 162,
              total: 163,
              transferPercent: '99.39%',
              effectiveNum: 162,
              effectivePercent: '99.39%'
            },
            {
              factorName: '总磷',
              count: 160,
              total: 163,
              transferPercent: '98.16%',
              effectiveNum: 160,
              effectivePercent: '98.16%'
            }
          ]
        }
        // ...其他点位数据
      ]
    };
  },
  methods: {
    exportToExcel() {
      const wb = XLSX.utils.book_new(); // 创建一个新的工作簿
      const ws = XLSX.utils.aoa_to_sheet(this.prepareData()); // 将数据转换为工作表

      XLSX.utils.book_append_sheet(wb, ws, 'Sheet1'); // 将工作表添加到工作簿
      XLSX.writeFile(wb, '导出数据.xlsx'); // 写入文件并触发下载
    },
    prepareData() {
      const data = [['siteId', 'siteName', 'factorName', 'count', 'total', 'transferPercent', 'effectiveNum', 'effectivePercent']];
      
      this.sites.forEach(site => {
        data.push([site.siteId, site.siteName]);
        site.factorEffectivenessList.forEach(factor => {
          data.push([null, null, factor.factorName, factor.count, factor.total, factor.transferPercent, factor.effectiveNum, factor.effectivePercent]);
        });
      });

      return data;
    }
  }
};
</script>

在这个示例中，exportToExcel方法创建了一个Excel文件并触发了文件下载。prepareData方法将你的原始数据转换为一个适合Excel的二维数组，其中第一行是列名，每个site的siteId和siteName作为每个站点的标题行，后面跟着该站点的factorEffectivenessList数据。

请注意，这个示例假设你的数据结构是按照你提供的格式组织的。你可能需要根据你的实际数据结构进行调整。