WishMeLz

生活其实很有趣

Vue中EXCEL的导入导出

import FileSaver from 'file-saver'
import XLSX from 'xlsx'

导入

    <el-upload
      class="upload-demo"
      drag
      action="https://jsonplaceholder.typicode.com/posts/"
      multiple
      accept=".xlsx"
      :on-exceed="exceed"
      :limit="1"
      :on-remove="remove"
      :http-request="uploadFile"
    >
      <i class="el-icon-upload"></i>
      <div class="el-upload__text">
        将文件拖到此处,或
        <em>点击上传</em>
      </div>
      <div class="el-upload__tip" slot="tip">1次只能上传1个xls文件,且不超过500kb</div>
    </el-upload>

// 如果读取时间  XLSX.read(data, { type: 'binary', cellDates: true })

async uploadFile (params) {
      const _file = params.file
      const fileReader = new FileReader()
      fileReader.onload = ev => {
        try {
          const data = ev.target.result
          const workbook = XLSX.read(data, {
            type: 'binary'
          })
          for (const sheet in workbook.Sheets) {
            // 循环读取每个文件
            const sheetArray = XLSX.utils.sheet_to_json(workbook.Sheets[sheet])
            // 若当前sheet没有数据,则continue
            if (sheetArray.length == 0) {
              continue
            }
            console.log('读取文件')
            console.log(sheetArray)   //读取出来的内容
            this.dataList = sheetArray
          }
        } catch (e) {
          this.$message.warning('文件类型不正确!')
        }
      }
      fileReader.readAsBinaryString(_file)
    },

导出

第一种:根据ele的table表格导出

      var xlsxParam = { raw: true } // 转换成excel时,使用原始的格式
      var wb = XLSX.utils.table_to_book(
        document.querySelector('#outTable'),
        xlsxParam
      ) // outTable为列表ID
      var wbout = XLSX.write(wb, {
        bookType: 'xlsx',
        bookSST: true,
        type: 'array'
      })
      try {
        FileSaver.saveAs(   //这里的sheetjs.xlsx是名字
          new Blob([wbout], { type: 'application/octet-stream;charset=utf-8' }),
          'sheetjs.xlsx' 
        )       
      } catch (e) {
        if (typeof console !== 'undefined') console.log(e, wbout)
      }
      return wbout

第二种:根据数组转换为表格

      var _data = [
        ['id', 'name', 'value'],   // 第一行
        [1, 'sheetjs', 7262],     // 第二行
        [2, 'js-xlsx', 6969]     // 第三行
      ]
      const ws = XLSX.utils.aoa_to_sheet(_data)
      const wb = XLSX.utils.book_new()
      XLSX.utils.book_append_sheet(wb, ws, 'Sheet1')
      XLSX.writeFile(wb, 'SheetJS.xlsx')

数据是个二维数组,相当于第一行,第二行,第三行,以此类推。