Excel（xlsx）文件读与写（JS版）

大家应该都遇到过上传数据，但是对于不稳定的数据又不方便直接上传到后端，需要前端本地装饰后在上传。

于是就有了下面的方法，旨在解决由前端获取文件数据，对数据处理后，以数据的形式上传后端。

1、首先，项目内安装xlsx依赖包

npm i xlsx -S

2、读方法封装

import * as XLSX from "xlsx";
const readFile = file => {
  return new Promise(resolve => {
    let reader = new FileReader();
    reader.readAsBinaryString(file);
    reader.onload = ev => {
      resolve(ev.target.result);
    };
  });
};
//暴漏出来调用
export const readXLXLFile = async (file, index) => {
  // 将file变成二进制读取到的
  let data = await readFile(file);
  // 将得到的二进制转化一下
  let workbook = XLSX.read(data, { type: "binary", dateNF: "yyyy-mm-dd", cellDates: true });
  // 最后把数据转成json格式的
  let worksheet = workbook.Sheets[workbook.SheetNames[index]]; //这里是表格的名字,这里取第一个表格,1就是第二个表格数据
  //将得到的worksheet转化为json格式
  return XLSX.utils.sheet_to_json(worksheet);
};

3、写方法封装

import * as XLSX from "xlsx";
function sheet2blob(sheet, sheetName) {
  //将文件转换为二进制文件
  sheetName = sheetName || "sheet1";
  let workbook = {
    SheetNames: [sheetName],
    Sheets: {}
  };
  workbook.Sheets[sheetName] = sheet;
  // 生成excel的配置项
  let wopts = {
    bookType: "xlsx", // 要生成的文件类型
    bookSST: false, // 是否生成Shared String Table，官方解释是，如果开启生成速度会下降，但在低版本IOS设备上有更好的兼容性
    type: "binary"
  };
  let wbout = XLSX.write(workbook, wopts);
  let blob = new Blob([s2ab(wbout)], { type: "application/octet-stream" });
  // 字符串转ArrayBuffer
  function s2ab(s) {
    let buf = new ArrayBuffer(s.length);
    let view = new Uint8Array(buf);
    for (let i = 0; i != s.length; ++i) view[i] = s.charCodeAt(i) & 0xff;
    return buf;
  }
  return blob;
}

/*************************************************************************************/
function downloadXLSX(url, saveName) {
  //下载模板文件
  if (typeof url == "object" && url instanceof Blob) {
    url = URL.createObjectURL(url); // 创建blob地址
  }

  let aLink = document.createElement("a");
  aLink.href = url;
  aLink.download = saveName || ""; // HTML5新增的属性，指定保存文件名，可以不要后缀，注意，file:///模式下不会生效
  let event;
  if (window.MouseEvent) event = new MouseEvent("click");
  else {
    event = document.createEvent("MouseEvents");
    event.initMouseEvent("click", true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
  }
  aLink.dispatchEvent(event);
}
/*************************************************************************************/
export const writeXLXLFile = (array, name = "sheet1", download = false) => {
  console.log(array, name);
  let sheet = XLSX.utils.aoa_to_sheet(array);
  let blob = sheet2blob(sheet, name);
  if (download) {
    downloadXLSX(blob, `${name}.xlsx`);
  }
};

提示：2、3两点可以直接封装在一个xlsxUtils.js里，然后调用

import { readXLXLFile, writeXLXLFile } from "@/utils/xlsxUtil.js";

4、调用读方法

  //uploadFile上传的表格文件
  //0指的是表格文件的表顺序，0指第一个表格，1指第二个表格，以此类推
  readXLXLFile(uploadFile, 0).then(res => {
    console.log(res);
  });

5、调用写方法

  let list = [["姓名", "单位", "手机号码", "上传异常原因"]];//第一行为表头
  for (let index = 0; index < tableData.length; index++) {//tableData为需要写入的数据
    const item = tableData.value[index];
    list[index + 1] = [item.name, item.company, item.mobile, item.error];
  }
  writeXLXLFile(list, "异常", true);//可以默认写入即下载

到此就结束了，没有写太多的说明，基本都在代码注释里了，还是比较简单的，如果需要合并单元格之类的表头，后续在更新。