Exceljs在浏览器js读取xlsx文件Demo,修改表格单元格,下载导出保存文件,保留样式

Demo: Exceljs在浏览器js读取xlsx文件,修改表格单元格,生成文件下载,保留历史的表格样式

请导入 xlsx 表格文件测试



纯浏览器端js，实现Excel：

  1. .xlsx 文件的读取、解析
  2. excel单元格、工作表的数据修改、插入数据、追加内容
  3. 下载js修改后的表格文件
  4. 修改后，保留老的excel的全部样式（文字颜色、背景色、字号、字体、字号大小等）

exceljs 是一个开源项目，用来操作 excel xlsx 文件（解析、生成、修改等等）。https://github.com/exceljs/exceljs
exceljs 可在浏览器端(Browser)使用，也可以在 nodejs 服务器环境使用。
相比 Xlsx.js ，exceljs.js更好的地方就是能保留原始的原始样式，不会把颜色、背景色全部清除，是一个更慷慨的开源库。

完整的源代码

<script src="https://cdn.staticfile.org/exceljs/4.3.0/exceljs.min.js"></script>

<script src="https://cdn.jsdelivr.net/npm/file-saver@2.0.2/dist/FileSaver.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/promisify-file-reader@3.0.7/dist/index.min.js"></script>
<script>
  async function parseExcelFile2(inputElement) {
    var files = inputElement.files || [];
    if (!files.length) return;
    var file = files[0];

    console.time();
    const arrayBuffer = await PromisifyFileReader.readAsArrayBuffer(file)

    var workbook = new ExcelJS.Workbook();
    // workbook.xlsx.read(buffer)
    await workbook.xlsx.load(arrayBuffer)
    console.timeEnd();

    workbook.worksheets.forEach(function (sheet) {
      // 遍历工作表中的所有行（包括空行）
      sheet.eachRow({ includeEmpty: true }, function (row, rowNumber) {
        // 遍历一行中的所有单元格（包括空单元格）
        row.eachCell({ includeEmpty: true }, function (cell, colNumber) {
          // console.log('Cell ' + colNumber + ' = ' + cell.value);
          cell.value = (cell.value || '') + '-append'
        });
      })
    })

    const buffer = await workbook.xlsx.writeBuffer()

    var blob = new Blob([buffer])

    saveAs(blob, 'exceljs.xlsx')
  }
</script>