excel文件的导入导出（xlsx插件版）

前言

因需求需要整个excel文件的导入导出，故历经诸多磨难，完成以下代码

注：记得引入xlsx插件，不然应该是运行不起来的

html代码（vue-elementui）

  <div class="upload-center">
    <el-upload
      ref = 'upload'
      class="upload-demo"
      drag
      accept=".xls,.xlsx"
      :show-file-list="false"
      :before-upload="beforeAvatarUpload"
      :on-change="handleUpload"
      :auto-upload="false"
      action="">
      <i class="el-icon-upload"></i>
      <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
      <div class="el-upload__tip" slot="tip">单次上传一个Excel文件</div>
    </el-upload>
  </div>

导入

//在上传之前
    beforeAvatarUpload(file){
      let isXlS = file.type === 'application/vnd.ms-excel';
      let isXlSX = file.type === 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet';

      if (!isXlS && !isXlSX) {
        this.$message({ message: '导入的文件只能是 xls/xlsx 格式', type: 'error' });
        return false;
      }
      return true;
    },
    
    //上传文件的处理
    handleUpload (file,fileList) {
      this.excelJson = readExcel(file);
    },
    
    /**
 * @param {*} file 导入文件-必填
 */
readExcel(file) {
  const types = file.name.split('.')[1];
  const fileType = [
    'xlsx', 'xlc', 'xlm', 'xls', 'xlt', 'xlw', 'csv'
  ].some(item => item == types);
  if (!fileType) {
    alert('格式错误！请重新选择');
    return
  }

  const reader = new FileReader();
  let result = [];
  reader.onload = function (e) {
    const data = e.target.result;
    const wb = XLSX.read(data, {
      type: 'binary'
    });
    wb.SheetNames.forEach((sheetName) => {
      result.push({
        sheetName: sheetName,
        sheet: XLSX.utils.sheet_to_json(wb.Sheets[sheetName])
      })
    });
  };
  reader.readAsBinaryString(file.raw)

  return result;
};

导出

/**
 * @param {*} label 表头-必填-例['编码','编号','备注']
 * @param {*} data 数据-必填-例[['0001','2017001','天'],['0002','2017002','干']],
 * @param {*} sheetName sheet页名
 * @param {*} fileName 文件名称
 * @param {*} fileType 文件类型-暂只使用xlsx，xls
 */
function exportExcel(label, data, sheetName, fileName, fileType) {
  sheetName = sheetName || 'sheet1';
  fileName = fileName || '导出表';
  fileType = fileType || 'xls';
  if (fileType.indexOf("xls") === -1) {
    ElementUI.Message({
      message: '暂不支持此格式，请更改',
      type: 'warning'
    });
    return;
  }
  //组织数据
  data.splice(0, 0, label);
  //组织文件名
  fileName = fileName + new Date().getTime() + "." + fileType;
  //创建新文件
  var newfile = XLSX.utils.book_new();
  //新sheet
  var newfilesheet = XLSX.utils.aoa_to_sheet(data);
  //sheet添加到文件
  XLSX.utils.book_append_sheet(newfile, newfilesheet, sheetName);
  //导出文件
  XLSX.writeFile(newfile, fileName);
};

结语

导入也好，导出也好，都是有瑕疵的，具体优化可依需求而定，但是基本功能是具备的，也不要问为什么导入要搞成字符串，问就是代码是一种妥协的艺术