vue 解析xlsx并表格预览

npm install xlsx
var XLSX = require('xlsx')

data() {

    preview(url) {
      let that = this
      const loading = this.$loading({
        lock: true,
        text: '表格解析中',
        spinner: 'el-icon-loading',
        customClass: 'loadingClass',
      })
      axios
        .get(
          url,
          {
            responseType: 'arraybuffer', // 设置响应体类型arraybuffer
          }
        )
        .then(({ data }) => {
          let workbook = XLSX.read(new Uint8Array(data), { type: 'array' }) // 解析数据
          console.log('🚀 ~ file: importData.vue:102 ~ .then ~ data', data)
          let worksheet = workbook.Sheets[workbook.SheetNames[0]] // workbook.SheetNames 下存的是该文件每个工作表名字,这里取出第一个工作表
          /*   this.tableau = XLSX.utils.sheet_to_html(worksheet) // 渲染 */
          var outdata = XLSX.utils.sheet_to_json(worksheet) // 渲染
          that.excelData = outdata
          that.tableData = outdata
          that.total = outdata.length
          // 获取数据的key
          var importDataThead = Array.from(Object.keys(outdata[0])).map((item) => {
            return item
          })
          that.columnHeader = importDataThead
          // that.checkboxTableColumn = importDataThead.slice(0, 9)  分页功能
          that.checkboxTableColumn = importDataThead
    
        })
    },

 

return {
      columnHeader: [], //所有键的值
      excelData: [], // 导入的excel的数据
      checkboxTableColumn: [], // 表格显示列
      tableData: [], //表格数据
      total: 0, /* // 数据总数 */
    }
  },