Bootstrap

表格全量数据下载(FileSaver和xlsx)

@

1、安装FileSaver和xlsx,在项目中使用

(1)导出按钮方法

      async exportMethods() {
        let that = this
        let pageSize = 2000
        // let Fields = {
        //   zdwbm: "单位组织编码",
        // }
        try {
          const data = await this.queryData(1, 2000, {}, 'export');
          this.downloadData = JSON.parse(JSON.stringify(data))
        } catch (error) {
          console.error('Error fetching data:', error);
        }


      },

(2)假设有1万条数据,每次最多请求2000条,循环获取所有数据

      async queryData(pageNum, pageSize, { }, type) {
        let res
        let that = this
          res = await this.getListDataByApi(pageNum, pageSize, {}, type)
        var Data = []
        Data = Array.from(Data).concat(res)
        if (this.exportListTotal > pageNum * pageSize) {
          var data = await this.queryData(++pageNum, pageSize, {}, type)
          Data = Array.from(Data).concat(data)
        }
        return Data
      },

(3)downloadData保存所有得数据,在watch中监听,方法如下

      downloadData() {
        let Fields = {}//需要导出的字段
        this.tableHeader.forEach(item => {
          Fields[item.key] = item.label
        })
        if (this.downloadData.length == 0 || this.downloadData[0] == undefined) return
        var datas = this.DataInfo2(this.downloadData, Fields)
        this.download(datas, "Sheet1", this.tabTitleValue)
      },

(4)将处理后的数据使用安装的插件进行导出

      /**export--------------start */
      DataInfo2(datainfo, MapKey) {
        var Datas = [];
        if (datainfo.length == 0) return datainfo
        for (var i = 0; i < datainfo.length; i++) {
          var data = {};
          var rowData = datainfo[i];
          try {
            for (let key in MapKey) {
              if (MapKey) {
                data[MapKey[key]] = (rowData[key] == undefined || rowData[key] == null) ? "" : rowData[key];
              }

            }
          } catch (error) {
            console.error('Error fetching data:', error);
          }
          Datas.push(data)
        }
        return Datas;
      },
      download(data, sheetName, xlsxName) {
        var file = this.GetXlsxFile(data, sheetName, xlsxName)
        FileSaver.saveAs(file, xlsxName + ".xlsx");
      },
      GetXlsxFile(data, sheetName = "Sheet1", xlsxName) {

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

        // 创建一个新的工作表
        const worksheet = XLSX.utils.json_to_sheet(data);
        console.log("worksheet", worksheet)

        // 将工作表添加到工作簿
        XLSX.utils.book_append_sheet(workbook, worksheet, sheetName);

        // 访问需要居中的单元格
        const range = XLSX.utils.decode_range(worksheet['!ref']);


        const style = {
          alignment: {
            horizontal: 'center', // 水平居中
            vertical: 'center' // 垂直居中
          }
        };
        const startCell = range.s; // 开始单元格
        const endCell = range.e; // 结束单元格

        // 遍历范围内的每个单元格,并应用样式
        for (let row = startCell.r; row <= endCell.r; row++) {
          for (let col = startCell.c; col <= endCell.c; col++) {
            // 获取单元格
            const cell = worksheet[XLSX.utils.encode_cell({ r: row, c: col })];

            // 设置单元格样式
          }
        }
        // 将样式应用于单元格
        const excelBuffer = XLSX.write(workbook, { bookType: "xlsx", type: "array" });
        const fileData = new Blob([excelBuffer], { type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet" });

        // 生成文件对象
        const file = new File([fileData], xlsxName + ".xlsx", { type: fileData.type });
        return file;

      },
      /**export-------------- end */
;