当前位置: 首页 > article >正文

表格全量数据下载(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 */

http://www.kler.cn/a/386612.html

相关文章:

  • 【NLP】医学搜索Query相关性判断【阿里云:天池比赛】
  • StructuredStreaming (一)
  • 鸿蒙next版开发:相机开发-适配不同折叠状态的摄像头变更(ArkTS)
  • C++面试基础知识:排序算法 C++实现
  • 相机光学(四十二)——sony的HDR技术
  • 贪心算法入门(二)
  • Mysql基础 03 pymysql库、事务命令
  • 多个NVR同时管理EasyNVR多品牌NVR管理工具/设备:IP常见问题解决方案
  • Ubuntu 安装yum遇坑
  • Android 重新定义一个广播修改系统时间,避免系统时间混乱
  • Redis 的线程模型
  • 【卷积基础】CNN中一些常见卷积(1*1卷积、膨胀卷积、组卷积、深度可分离卷积)
  • 快速学习Django框架以开发Web API
  • Django 框架:全方位技术分析
  • Linux如何更优质调节系统性能
  • 【网络安全 | 并发问题】Nginx重试机制与幂等性问题分析
  • 【问题解决】Tomcat由低于8版本升级到高版本使用Tomcat自带连接池报错无法找到表空间的问题
  • 论文阅读-Event-based Visible and Infrared Fusion via Multi-task Collaboration
  • 机器学习,生成式AI ,LLM大模型,人工智能,他们之间的关系是什么?有什么不同?
  • uni-app 实现自定义底部导航
  • 数据库的使用02:SQLServer的连接字符串、备份、还原、SQL监视相关设置
  • 算法训练(leetcode)二刷第二十天 | 93. 复原 IP 地址、78. 子集、90. 子集 II
  • LeetCode34:在排序数组中查找元素第一个和最后一个位置
  • 创新引领,模块化微电网重塑能源格局
  • 使用开源Embedding模型嵌入高维空间向量
  • 设计模式之——单例模式