简单使用SheetJS js-xlsx导入导出

最新推荐文章于 2025-06-12 11:57:14 发布

原创最新推荐文章于 2025-06-12 11:57:14 发布 · 1.5k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#excel #js #javascript

本文介绍了如何使用SheetJS js-xlsx库进行Excel文件的导入读取和导出操作。首先，提供了SheetJS库的git地址和官方文档链接。接着，详细阐述了导入读取Excel文件的步骤，包括设置HTML元素、处理文件输入、使用FileReader.onload方法。最后，讲解了一个小封装的文件导出函数，该函数接受Excel数据、标题和文件名作为参数。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

SheetJS js-xlsx

git地址：https://github.com/SheetJS/sheetjs#sheetjs-js-xlsx
可以查看更详细的官方文档

如何导入读取Excel文件

先在页面中写一个导入文件的地方，以功能为目的，先不要在意样式
再写个文件处理完点击输出的小button
然后再引入xlsx，想用jquery再引一个这个库

<input type="file" id="file1"><br>
<button style="margin-left: 250px;" id="submit">submit➡️</button><br>
<input type="file" id="file2">
<script src="http://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>
<script src="https://unpkg.com/xlsx/dist/xlsx.full.min.js"></script>

最后，就可以再创建个script，里面写你要实现的功能逻辑了
这里代码再进行一下划分
先讲input中传入文件该如何处理，首先进行个监测，使用jquery的change事件：当元素的值发生改变时，会发生 change 事件

然后里面的东西几乎全网一样，大致过程为
先获取到file信息，使用FileReader中FileReader.onload方法
【FileReader.onload方法详见文档所述：https://developer.mozilla.org/zh-CN/docs/Web/API/FileReader/onload】
然后处理文件输入的元素数据，再进行二次处理将其赋值到persons中，至此文件内容便读取完成，格式为数组对象

    $('#file1').change(function (e) {
      var files = e.target.files;
      var fileReader = new FileReader();
      fileReader.onload = function (ev) {
        try {
          var data = new Uint8Array(ev.target.result),
          //一次处理数据
            workbook = XLSX.read(data, {
              type: 'array'
            }),
            persons = [];
        } catch (e) {
          console.log('文件类型不正确');
          return;
        }
        //二次处理数据
        let fromTo = '';
        for (let sheet in workbook.Sheets) {
          if (workbook.Sheets.hasOwnProperty(sheet)) {
            fromTo = workbook.Sheets[sheet]['!ref'];
            console.log(fromTo);
            persons = persons.concat(XLSX.utils.sheet_to_json(workbook.Sheets[sheet]));
            break;
          }
        }
        console.log(persons);
      };
      fileReader.readAsArrayBuffer(files[0]);
    });

文件导出

小封装，一个工厂模式函数，一共三个参数：
fileArr——传入的Excel数组对象
fileTitle——Excel头，也就是第一行内容
fileName——导出Excel的标题
因为是特定需求使用，封装的没那么灵活

function importExl(fileArr, fileTitle, fileName) {
    fileArr.forEach(item => {
      let _array = []
      _array.push(item.filename)
      _array.push(item.width)
      _array.push(item.height)
      _array.push(item.class)
      _array.push(item.xmin)
      _array.push(item.ymin)
      _array.push(item.xmax)
      _array.push(item.ymax)
      fileTitle.push(_array)
    })
    const ws = XLSX.utils.aoa_to_sheet(fileTitle);
    const wb = XLSX.utils.book_new();
    XLSX.utils.book_append_sheet(wb, ws, 'Sheet1');
    return XLSX.writeFile(wb, `${fileName}.xlsx`);
}