VUE xlsx.js 纯前端实现上传Excel文件，并读出来

功能

前端实现读取excel 判定限制上传表格最大行数

安装

npm install xlsx  --save

代码

 <el-upload class="upload"
               :show-file-list="false"
               :action="actionUrl"
               :on-change="importExcel"
               importExcel
               :on-preview="uploadRequestHandle"
               :auto-upload="false"
               :multiple="false"
               accept="application/vnd.ms-excel, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"
               :limit="1">
      <el-button slot="trigger"
                 size="small"
                 type="primary">选取文件</el-button>
      <el-button style="margin-left: 10px;"
                 size="small"
                 type="success"
                 @click="submitUpload">上传到服务器</el-button>
    </el-upload>

methods:{
// 导入表格
    importExcel (param) {
      console.log(param);
      let _this = this;
      _this.file2Xce(param).then(item => {
        if (item && item.length > 0) {
          // xlsxJson就是解析出来的json数据,数据格式如下
          // [{sheetName: sheet1, sheet: sheetData }]
          if (item[0] && item[0].sheet && item[0].sheet.length) {
            // _this.tableData = item[0].sheet  //把数据塞到表格预览
            console.log(item[0].sheet, 'item[0].sheet');
            if (item[0].sheet.length > 10) {
              return this.$message.warning('导入的数据大于10条')
            }
          }
        }
      })
        .catch(error => {
          loading.close();
        });
    },
    /**
     * 解析文件
     * @param {Object} file
     */
    file2Xce (file) {
      return new Promise(function (resolve, reject) {
        const reader = new FileReader();
        reader.onload = function (e) {
          const data = e.target.result;
          this.wb = XLSX.read(data, {
            type: "binary"
          });
          const result = [];
          this.wb.SheetNames.forEach(sheetName => {
            result.push({
              sheetName: sheetName,
              sheet: XLSX.utils.sheet_to_json(this.wb.Sheets[sheetName])
            });
          });
          console.log(result) */
          resolve(result);
        };
        reader.readAsBinaryString(file.raw);
      });
    },
}

console.log(item[0].sheet, ‘item[0].sheet’);//这个就是表格的对象