在vue3中实现 XLSX 动态模板汇出excel

   基本原理

   使用xlsx插件可以调用其API,来生成工作簿。将模板数据存放入工作簿当中，将内容字符串转ArrayBuffer，生成xlsx文件并创建超链接自动弹出。

  代码如下（以下代码已包含eslint校验）： 

// 打开文件链接
const openDownloadDialog = (blob, fileName) => {
  if (typeof blob === 'object' && blob instanceof Blob) {
    // eslint-disable-next-line no-param-reassign
    blob = URL.createObjectURL(blob);// 创建blob地址
  }
  console.log(blob);
  let aLink = document.createElement('a');
  aLink.href = blob;
  aLink.download = fileName || '';
  let event;
  if (window.MouseEvent) event = new MouseEvent('click');
  aLink.dispatchEvent(event);
};
// 文件数据转excel
const workbook2blob = (workbook) => {
  // 生成excel的配置项
  let wopts = {
    // 要生成的文件类型
    bookType: 'xlsx',
    bookSST: false,
    type: 'binary',
  };
  let wbout = XLSX.write(workbook, wopts);
  // 将字符串转ArrayBuffer
  function s2ab(s) {
    let buf = new ArrayBuffer(s.length);
    let view = new Uint8Array(buf);
    console.log('11');
    for (let i = 0; i !== s.length;) {
      view[i] = s.charCodeAt(i);
      i += 1;
    }
    return buf;
  }
  let buf = s2ab(wbout);
  let blob = new Blob([buf], {
    type: 'application/octet-stream',
  });
  return blob;
};
// 点击模板汇出按钮
const excelModuleExport = () => {
  // 接口动态获取模板字符串
  apiFunction.Q_WMS_Field_Info_Storage_OUT().then((res) => {
    if (res.data.content.length > 0) {
      let sheet1data = [];
      res.data.content.forEach((el) => {
        let formObj = {};
        formObj[el.field_cn] = '';
        sheet1data.push(formObj);
      });
      // 结果内容[{名称:''},{分数:''}]，展出时就是两个标题头
      // 将标题以及内容生成sheet数据
      let sheet1 = XLSX.utils.json_to_sheet(sheet1data);
      // 创建一个新的空的workbook
      let wb = XLSX.utils.book_new();
      // 将内容添加到对应的工作簿之中
      XLSX.utils.book_append_sheet(wb, sheet1, '入库数据');
      // 将工作簿的内容转为xlsx
      let workbookBlob = workbook2blob(wb);
      openDownloadDialog(workbookBlob, '入库模板.xls');
    } else {
      console.log('no data');
    }
  });
};

 效果如下：