vue上传excel获取表格数据(亲测ok)

https://blog.csdn.net/qq_41117240/article/details/127391457

https://blog.csdn.net/cecoal/article/details/125217317

 

首先安装xlsx插件

yarn add xlsx@0.15.3

 

<el-upload class="upload-btn"
            ref="upload"
            action
            accept=".xls, .xlsx"
            :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>

 

import XLSX from 'xlsx';

//导入 表单上传
	readExcel (file) {
	  // console.log('file', file);
	  const types = file.name.slice(file.name.lastIndexOf('.'))
	  const fileType = ['.xlsx', '.xls'].some(item => item === types)
	  // console.log(file.name.lastIndexOf('.'), types, fileType);
	  //  校验格式
	  if (!fileType) {
	    this.$message('格式错误！请重新上传')
	    return
	  }
	  // 返回workbook
	  this.file2Xce(file).then(tabJson => {
	    // console.log('tabJson', tabJson);
	    this.handleImportItem(tabJson)  //处理导入的数据使导入的数据在页面中展示。这个方法根据自己的需求，属于定制化
	  })
	},

  // 读表单，返回workbook
    file2Xce (file) {
      return new Promise(resolve => {
        const reader = new FileReader()
        reader.onload = e => {
          const data = e.target.result
          // 二进制流方式读取得到整份Excel表格对象
          this.excelData = XLSX.read(data, {
            type: 'binary'
          })
          // console.log('exvelData', this.excelData);
          // 只取第一个工作表
          const wsname = this.excelData.SheetNames[0]// 取第一张表
          const ws = XLSX.utils.sheet_to_json(this.excelData.Sheets[wsname])// 生成json表格内容
          resolve(ws)
        }
        // 以二进制方式打开文件
        reader.readAsBinaryString(file.raw); //file.raw取上传文件的File
      })
    },
 

 

 

导入的excel有换行空格啥的不要过滤的话 在css样式 white-space: pre-line 即可

<spanstyle="white-space: pre-line">
{{record.steps}}
</span>