vue3 导出数据为 excel 文件 + 导入excel文件

菜鸟最近做了一个需求，就是需要上传表单并识别，然后识别出来的内容要可以修改，然后想的就是识别内容变成 form 表单，所以并没有使用 SpreadJS ，这个 SpreadJS 有很多 excel 的功能，强大是强大，就是搜出来的全是葡萄城的文档不清不楚（沙比一样）、再或者就是英文文档（看不懂），而且我需求也不是很复杂！

这里上传识别交给后端处理了，菜鸟做的就是查看详情的是时候可把表单展示的数据导出成 excel 文件就行！

安装插件

npm i xlsx
npm install -S file-saver

封装组件 – Export2Excel.js（多表）

此处参考：vue3中将数据导出为excel表格

菜鸟的需求是要一个 excel 包含多个表，所以菜鸟对其进行了优化：

/**
 *
 * @param {Object} workbook 工作薄
 * @param {Object} worksheet 工作表
 * @param {Object} cell 单元格
 * 标记，引用单元格时所使用的地址格式（如：A1、C7）
 */
 
import {
    saveAs } from "file-saver";
import * as XLSX from "xlsx";

function datenum(v, date1904) {
   
  if (date1904) v += 1462;
  var epoch = Date.parse(v);
  return (epoch - new Date(Date.UTC(1899, 11, 30))) / (24 * 60 * 60 * 1000);
}

function sheetFromArrayOfArrays(data) {
   
  var ws = {
   };
  var range = {
   
    s: {
   
      c: 10000000,
      r: 10000000,
    },
    e: {
   
      c: 0,
      r: 0,
    },
  };
  for (var R = 0; R !== data.length; ++R) {
   
    for (var C = 0; C !== data[R].length; ++C) {
   
      if (range.s.r > R) range.s.r = R;
      if (range.s.c > C) range.s.c = C;
      if (range.e.r < R) range.e.r = R;
      if (range.e.c < C) range.e.c = C;
      var cell = {
   
        v: data[R][C], // v表示单元格原始值， t表示内容类型，s-string类型，n-number类型，b-boolean类型，d-date类型，等等
      };
      if (cell.v == null) continue;
      /**
       * 通过地址对象 { r: R, c: C } 来获取单元格，R 和 C 分别代表从 0 开始的行和列的索引。
       * XLSX.utils 中的 encode_cell/decode_cell 方法可以转换单元格地址
       *    XLSX.utils.encode_cell({ r: 7, c: 2 })  ===》 C7
       */
      var cellRef = XLSX.utils.encode_cell({
    c: C, r: R });

      if (typeof cell.v === "number") cell.t = "n";
      else if (typeof cell.v === "boolean") cell.t = "b";
      else if (cell.v instanceof Date) {
   
        cell.t = "n";
        cell.z = XLSX.SSF._table[14];
        cell.v = datenum(cell.v);
      } else cell.t = "s";

      ws[cellRef] = cell;
    }
  }
  // ws['!ref']：表示所有单元格的范围，例如从A1到F8则记录为A1:F8
  if (range.s.c < 10000000) ws["!ref"] = XLSX.utils.encode_range(range);
  return ws;
}

function Workbook() {
   
  if (!(this instanceof Workbook)) return new Workbook();
  this.SheetNames = [];
  this.Sheets = {
   };
}

// 字符串转为ArrayBuffer
function s2ab(s) {
   
  var buf = new ArrayBuffer(s.length);
  var view = new Uint8Array(buf);
  for (var i = 0; i !== s.length; ++i) view[i] = s.charCodeAt(i) & 0xff;
  return buf;
}

/**
 *
 * @param {Array} multiHeader  多行表头,三维数组,因为每一行都是一个数组
 * @param {Array} header  表头
 * @param {Array} data  数据
 * @param {String} filename  文件名
 * @param {Array} merges  合并单元格
 * @param {Boolean} autoWidth  是否设置单元格宽度
 * @param {String} bookType  要生成的文件类型
 */
export function exportJsonToExcel({
   
  multiHeader = [],
  header,
  data,
  filename,
  sheetname,
  merges = [],
  autoWidth = true,
  bookType = "xlsx",
} = {
   }) {
   
  filename = filename || "excel-list";

  for (let i in header) {
   
    data[i] = [...data[i]];
    data[i].unshift(header[i]);
  }
  
  // eg:multiHeader: [[["光缆熔接纤序表"], ["2313123"]],[["!23131"], ["312313"]],[...]],
  for (let j in data) {
   
    if (multiHeader[j]) {
   
      for (let i = multiHeader[j].length - 1; i > -1; i--) {
   
        data[j].unshift(multiHeader[j][i]);
      }
    }
  }

  var wb = new Workbook();

  let ws = [];
  for (let i in data) {
   
    ws.push(sheetFromArrayOfArrays(data[i]));
  }
  
  // ws[!merges]：存放一些单元格合并信息，是一个二维数组，每个数组由包含s和e构成的对象组成，s表示开始，e表示结束，r表示行，c表示列，eg：[["A1:C1","A2:C2"],[...]]，表示合并A1到C1且只对第一个表有用
  if (merges.length > 0) {
   
    for (let i in ws) {
   
      if (!<