前端导入导出excel

导入

  const inputFileChange = () => {
    document.getElementById(`fileInput`).addEventListener('change', inputFileChangeDeal);
  };
    const inputFileChangeDeal = (e) => {
    const files = e.target.files;
    if (files.length == 0) return;
    var f = files[0];
    if (!/\.xlsx$/g.test(f.name)) {
      alert('仅支持读取xlsx格式！');
      return;
    }
    readWorkbookFromLocalFile(f, function (workbook) {
    // excel里的json数据
      const data = readWorkbook(workbook);
    });
  };
  const readWorkbookFromLocalFile = (file, callback) => {
  const reader = new FileReader();
  reader.onload = function (e) {
    const data = e.target.result;
    const workbook = XLSX.read(data, { type: 'buffer' });
    if (callback) callback(workbook);
  };
  reader.readAsArrayBuffer(file);
};

 const readWorkbook = (workbook) => {
  const sheetNames = workbook.SheetNames; // 工作表名称集合
  const worksheet = workbook.Sheets[sheetNames[0]]; // 这里我们只读取第一张sheet
  const headers = get_header_row(worksheet);
  const workBookData = XLSX.utils.sheet_to_json(worksheet);
  return { workBookData, headers };
};

const get_header_row = (sheet) => {
  const headers = [];
  const range = XLSX.utils.decode_range(sheet['!ref']);
  let C,
    R = range.s.r; /* 从第一行开始 */
  /* 按列进行数据遍历 */
  for (C = range.s.c; C <= range.e.c; C += 1) {
    /* 查找第一行中的单元格 */
    const cell = sheet[XLSX.utils.encode_cell({ c: C, r: R })];
    let hdr = 'UNKNOWN ' + C; // <-- 进行默认值设置
    if (cell && cell.t) hdr = XLSX.utils.format_cell(cell);
    headers.push(hdr);
  }
  return headers;
};
  {/* 元素 */}
        <input
        type="file"
        id='fileInput'
        style={{ display: 'none' }}
        accept="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"
        ref={inputEl}
      />
      // inputEl.current.value = ''; change事件后记得清空input的值，否则两次导入同一文件无法触发

导出

export const handleExport = (aoa, aoaHeader) => {
  // aoa就是一个需要导出的数据的数组对象类似于[{a:x1},{a:x2}]
  // 导出的内容，即第二行开始的所有数据
  // let aoa = saveList.map((item) => {
  //   return {
  //     产品编号: item.ebIds,
  //     产品名称: item.ebName,
  //     产品型号: item.ebModelName,
  //   };
  // });
  // 导出的标题，即第一行数据
  //  let aoaHeader = [
  //    "产品编号",
  //    "产品名称",
  //    "产品型号",
  //    "批次",
  //    "配置传感器",
  //    "是否激活",
  //    "是否过期",
  //  ];
  // index.html引入了文件XLSX就能找到，更多接口查看官方文档
  const sheet = XLSX.utils.json_to_sheet(aoa, { header: aoaHeader });
  openDownloadDialog(sheet2blob(sheet), '导出数据.xlsx');
};
/**
 * 通用的打开下载对话框方法，没有测试过具体兼容性
 * @param url 下载地址，也可以是一个blob对象，必选
 * @param saveName 保存文件名，可选
 */
export const openDownloadDialog = (url, saveName) => {
  if (!!window.ActiveXObject || 'ActiveXObject' in window) {
    //兼容 判断是不是ie的浏览器
    window.navigator.msSaveOrOpenBlob(url, saveName);
  } else {
    const downloadElement = document.createElement('a');
    const href = window.URL.createObjectURL(url);
    downloadElement.href = href;
    downloadElement.download = saveName;
    document.body.appendChild(downloadElement);
    downloadElement.click();
    document.body.removeChild(downloadElement); // 下载完成移除元素
    window.URL.revokeObjectURL(href); // 释放掉blob对象
  }
};

为什么写的那么丑，ps：写给自己看的，所以看着是垃圾