iview+vue實現匯入EXCEL預覽功能

<!-- 匯入資料 -->
  <Drawer title="匯入資料" closable v-model="importModalVisible" width="1000">
      <div
        style="
          display: flex;
          justify-content: space-between;
          align-items: center;
        "
      >
        <Upload ref="upload"
          :action="importFile"
          :before-upload="beforeUploadImport"
          accept=".xls, .xlsx"
          :on-success="uploadSucess"
          :headers="accessToken">
          <Button
            :loading="reading"
            icon="ios-cloud-upload-outline"
            style="margin-right: 10px"
            >上傳Excel檔案</Button
          >
          <span v-if="uploadfile.name"
            >當前選擇檔案：{{ uploadfile.name }}</span
          >
        </Upload>
        <Button @click="clearImportData" icon="md-trash">清空資料</Button>
      </div>
      <Alert type="warning" show-icon
        >匯入前請下載檢視匯入模版資料檔案檢視所需欄位及說明，確保資料格式正確，不得修改列英文名稱</Alert
      >
      <Table
        :columns="importColumns"
        border
        :data="importTableData"
        ref="importTable"
      ></Table>
      <!-- <div class="drawer-footer"> -->
        <div style="position: absolute; right: 15px; display: inline-block">
          <Button @click="importModalVisible = false">關閉</Button>
          <Button
            :loading="importLoading"
            :disabled="importTableData.length <= 0"
            @click="importData"
            style="margin-left: 8px"
            type="primary"
          >
            確認匯入
            <span v-if="importTableData.length > 0"
              >{{ importTableData.length }} 條資料</span
            >
          </Button>
        </div>
      <!-- </div> -->
</Drawer>

npm i xlsx

import XLSX from "xlsx";

importFile: importEquipment,//介面
accessToken: {},
uploadfile: {
     name: ''
},
importColumns: [],
importTableData: [],

//匯入資料
    beforeUploadImport(file) {
      this.uploadfile = file
      const fileExt = file.name
        .split('.')
        .pop()
        .toLocaleLowerCase()
      if (fileExt == 'xlsx' || fileExt == 'xls') {
        this.readFile(file)
        this.file = file
      } else {
        this.$Notice.warning({
          title: '檔案型別錯誤',
          desc:
            '所選檔案‘ ' +
            file.name +
            ' '不是EXCEL檔案，請選擇字尾為.xlsx或者.xls的EXCEL檔案。'
        })
      }
      return false
    },
    // 讀取檔案
    readFile(file) {
      this.reading = true
      const reader = new FileReader()
      reader.readAsArrayBuffer(file)
      reader.onerror = (e) => {
        this.reading = false
        this.$Message.error('檔案讀取出錯')
      }
      reader.onload = (e) => {
        console.log(e.target.result)
        const data = e.target.result
        const { header, results } = excel.read(data, 'array')
        const tableTitle = header.map((item) => {
          return { title: item, key: item, minWidth: 130, align: 'center' }
        })
        this.importTableData = results
        this.importColumns = tableTitle
        this.reading = false
        this.$Message.success('讀取資料成功')
      }
    },
    uploadSucess(response) {
      if (response.code == 200) {
        this.$Message.success('匯入成功')
        this.importModalVisible = false
        this.clearImportData()
        this.getDataList()
      } else {
        this.$Message.error(response.message)
      }
      this.uploadfile = {}
    },
    clearImportData() {
      this.importTableData = []
      this.importColumns = []
      this.uploadfile = {}
      this.$refs.upload.clearFiles();
    },