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

尤夕
2023-12-01

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`);
}
 类似资料: