美文网首页导出导入相关
利用js-xlsx在vue中与element-ui结合实现exc

利用js-xlsx在vue中与element-ui结合实现exc

作者: asseek | 来源:发表于2018-04-19 10:51 被阅读0次

因为项目采用element-ui,为了简单直接使用它的 Upload组件来搭建读取本地文档功能,因为是利用js-xlsx在前端读取,所以要把 auto-upload关掉

template

<el-upload
    ref="upload"
    action="/wm/upload/"
    :show-file-list="false"
    :on-change="readExcel"
    :auto-upload="false">
  <el-button
      slot="trigger"
      icon="el-icon-upload"
      size="small"
      type="primary">
    上传文件
  </el-button>
</el-upload>

methods

readExcel(file) {
  const fileReader = new FileReader();
  fileReader.onload = (ev) => {
    try {
      const data = ev.target.result;
      const workbook = XLSX.read(data, {
        type: 'binary',
      });
      for (let sheet in workbook.Sheets) {
        const sheetArray = XLSX.utils.sheet_to_json(workbook.Sheets[sheet]);
      }
    } catch (e) {
      this.$message.warning('文件类型不正确!');
      return false;
    }
  };
  fileReader.readAsBinaryString(file.raw);
},

相关文章

网友评论

    本文标题:利用js-xlsx在vue中与element-ui结合实现exc

    本文链接:https://www.haomeiwen.com/subject/qqnikftx.html