利用js-xlsx在vue中與element-ui結(jié)合實(shí)現(xiàn)excel前端導(dǎo)入

因?yàn)轫?xiàng)目采用element-ui，為了簡單直接使用它的 Upload組件來搭建讀取本地文檔功能，因?yàn)槭抢?code>js-xlsx在前端讀取，所以要把 auto-upload關(guān)掉

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);
},
最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請結(jié)合常識與多方信息審慎甄別。
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡書系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容