vue通過Export2Excel.js進行匯入excel,獲取資料

<!--    封裝的模板下載和匯入按鈕和功能組件-->

<template>
  <span style="margin-left: 10px">
    <el-button size="mini"  @click="downFiles"> 下載模板</el-button>
    <el-upload
      action=""
      style="width: 115px;display: inline-block;margin-left: 10px"
      :http-request="uploadSectionFile"
      :on-success="handleAvatarSuccess"
      :before-upload="beforeUpload"
      :show-file-list="false"
      :accept="accept"
    >
      <el-button  size="mini">批量匯入</el-button>
    </el-upload>
  </span>
</template>

<script>
import XLSX from 'xlsx'

  import Blob from './Excel/Blob'
  import Export2Excel from './Excel/Export2Excel.js'

export default {
  name: 'importTemplate',
  data() {
    return {
      accept: '.xlsx',
      fileTemp: {}, // 匯入的檔案流
      tableData: []
    }
  },
  methods: {
    downFiles() {
      // <a href="https://www.cnblogs.com/Z-HarOld/archive/2023/04/14/static/培訓實施參加人員統計模板.xlsx"><i className="el-icon-download"/>下載模板</a>
      window.open('/static/培訓實施參加人員統計模板.xlsx')
    },
    uploadSectionFile(uploader) {
      this.fileTemp = uploader.file
      if (this.fileTemp) {
        if ((this.fileTemp.type === 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet') ||
          (this.fileTemp.type === 'application/vnd.ms-excel')) {
　　　　　　
          this.importfEx(this.fileTemp)
        } else {
          this.$message({
            type: 'warning',
            message: '附件格式錯誤，請洗掉后重新上傳！'
          })
        }
      } else {
        this.$message({
          type: 'warning',
          message: '請上傳附件！'
        })
      }
    },
    importfEx(event) {
      // FileReader 物件允許Web應用程式異步讀取存盤在用戶計算機上的檔案（或原始資料緩沖區）的內容
      const fileReader = new FileReader()
      const file = event
      // 回呼函式
      fileReader.onload = ev => {
        try {
          const data = ev.target.result
          const workbook = XLSX.read(data, { type: 'binary' })
          // excel讀取出的資料
          const excelData = https://www.cnblogs.com/Z-HarOld/archive/2023/04/14/XLSX.utils.sheet_to_json(workbook.Sheets[workbook.SheetNames[0]])
          // 將上面資料轉換成 table需要的資料---將獲取到的資料$emit拋出資料
          this.$emit('changeImportData', excelData)
        } catch (e) {
          this.$message({ type: 'error', message: '檔案型別不正確!' })
          return false
        }
      }
      // 讀取檔案 成功后執行上面的回呼函式
      fileReader.readAsBinaryString(file)
    },
    handleAvatarSuccess(res, file) {
      console.log(res)
      // this.vm.edit.data.contractProjects.push({})
    },
    beforeUpload(file) {
      if (this.accept !== '') {
        const index = file.name.indexOf('.')
        const type = file.name.substring(index + 1, file.name.length)
        if (this.accept.indexOf(type) === -1) {
          this.$message.error(`檔案 ${file.name}格式不正確,請上傳指定格式的檔案 ${this.accept}`)
          return false
        }
      }
    }
  }
}
</script>

<style scoped>

</style>

<!--   2. 父組件呼叫封裝的組件-->

<template>

<!--              //匯入excel  下載模板組件-->
<import-template @changeImportData="https://www.cnblogs.com/Z-HarOld/archive/2023/04/14/changeImportDataFun" />

</template>

methods: {
  changeImportDataFun(dataArr) {
    // 回傳的陣列資料
  },
}

標籤：其他

上一篇：關于在 vite 中無法使用絕對地址動態匯入的問題

下一篇：WebAssembly初嘗試