react+xlsx读取项目public下文件,并修改文件内容,再下载

xlsx版本 0.18.5  react版本 17.0.2

前提:使用 xlsx.readFile(`${process.env.PUBLIC_URL}/test.xlsx`)  无法拿到文件,但a.href时可以拿到文件 。

原因:

  • 使用a.href时,它是基于浏览器环境,可以使用相对路径进行文件加载
  • XLSX.readFile方法主要是用于在服务器端运行的情况下加载本地文件

解决方案:


import * as XLSX from 'xlsx';
   * 下载文件
   *  */
  async function addDataToWorkbook() {
    try {
      const response = await fetch(`${process.env.PUBLIC_URL}/test.xlsx`);
      const arrayBuffer = await response.arrayBuffer();
      const data = new Uint8Array(arrayBuffer);
      const workbook = XLSX.read(data, { type: 'array' });

      // 1.获取第一个工作表
      const sheetName = workbook.SheetNames[0];
      const sheet = workbook.Sheets[sheetName];
      // 2. 获取第一行作为模板
      const templateRow = XLSX.utils.sheet_to_json(sheet, { header: 1 })[0];
      // 3. 清空工作表中的数据(除第一行外)
      const range = XLSX.utils.decode_range(sheet['!ref']);
      for (let rowNum = range.s.r + 1; rowNum <= range.e.r; rowNum++) {
        const rowAddress = XLSX.utils.encode_row(rowNum);
        for (let colNum = range.s.c; colNum <= range.e.c; colNum++) {
          const cellAddress = XLSX.utils.encode_col(colNum) + rowAddress;
          delete sheet[cellAddress];
        }
      }
      // 4. 添加数据到工作表
      const rows =  [
        ['John', 'Jane'], 
        [28, 32],
        // ... Add more data
      ];
        XLSX.utils.sheet_add_aoa(sheet, [templateRow, ...rows], { origin: 0 });

       // 5. 生成新的 Excel 文件
      const updatedWorkbook = XLSX.utils.book_new();
      XLSX.utils.book_append_sheet(updatedWorkbook, sheet, sheetName);
      const updatedData = XLSX.write(updatedWorkbook, { bookType: 'xlsx', type: 'array' });

      // 6. Download the new Excel file
      const blob = new Blob([updatedData], {
        type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet',
      });
      const url = URL.createObjectURL(blob);
      const link = document.createElement('a');
      link.href = url;
      link.download = 'updated.xlsx';
      link.click();
    } catch (error) {
      console.error('加载文件出错:', error);
    }
  }

  • 1
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值