vue excel文件的導入讀取和下載

導讀：后台管理平台經常要上傳文件讀取文件的內容和導出數據表，因此需要依賴第三方插件xlsx

1、安裝依賴

npm install xlsx -S

2、在目標組件vue中引入

import XLSX form 'xlsx

3、簡單的創建並導出數據表

data() {
　　return {
　　　　xlxsData: [  // 源數據
　　　　　{
　　　　　　'type': '顏色',
　　　　　　'ID': '34234',
　　　　　　'name': 'Light Pink'
　　　　　}
　　　　]
　　}
},
methods: {
  downExcle() {
　　const outputXlsxFile = (data, header, xlsxName) => {
　　　　const ws = XLSX.utils.json_to_sheet(data, header)
　　　　const wb = XLSX.utils.book_new()
　　　　XLSX.utils.book_append_sheet(wb, ws, xlsxName)
　　　　XLSX.writeFile(wb, xlsxName + '.xlsx')
　　};

　　// 理想數據模型
　　//let data = [
　　//　　{
　　//　　　　"類型": "顏色",
　　//　　　　"id": "34234",
　　//　　　　"名稱": "Light Pink"
　　//　　}
　　//];

　　// 實際數據模型 this.xlxsData
　　// 映射表頭mapList
　　const mapList = {
　　　　"type": "類型",
　　　　"id": "ID",
　　　　"name": "名稱"
　　} 
　　let header = {
　　　　header: Object.values(mapList)  // 獲取中文表頭
　　}
　　// 調用filterJson函數進行JSON轉化
　　outputXlsxFile(this.filterJson(mapList), header, '標簽批量模版')
　},
　// 將中文映射成英文鍵
　filterJson(mapList) {  
　　　let res = [];
　　　this.xlxsData.map(item => { // 對源數據處理，將英文鍵轉化成中文

　　　　　let obj = {}

　　　　for (let key in mapList)

　　　　　　obj[mapList[key]] = item[key] // 保持xlxsMap的鍵和源數據一致，否則會有數據會缺少

　　　　　}

　　　　res.push(obj)

　　　})

　　　return res

　　}

　 }

注： 一般data的格式不會是中文鍵名，因此需要過濾函數，進行轉化

 4、導入並讀取excel文件

　　<el-upload

　　　　action="/"

　　　　:on-change="uploadChange"

　　　　:show-file-list="false"

　　　　accept="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet,application/vnd.ms-excel"

　　　　:auto-upload="false">

　　　　<el-button size="small" icon="el-icon-upload" type="primary">導入數據</el-button>

　　</el-upload>

data() {
　　return {
　　　 xlscList: [],
      xlscTitle: {
　　　　　"類型": "type"
        "ID": "id",
        "名稱": "name"
      },
　　}
},
methods:{
　　uploadChange(file) {
      let self = this;
      const types = file.name.split('.')[1];
      const fileType = ['xlsx', 'xlc', 'xlm', 'xls', 'xlt', 'xlw', 'csv'].some(item => {
        return item === types
      });
      if (!fileType) {
        this.$message.error('文件格式錯誤，請重新選擇文件！')
      }

      this.file2Xce(file).then(tab => {
        // console.log(tab)
　　　　　// 過濾，轉化正確的JSON對象格式
        if (tab && tab.length > 0) {
          tab[0].sheet.forEach(item => {
            let obj = {};
            for (let key in item) {
              obj[self.xlscTitle[key]] = item[key];
            }
            self.xlscList.push(obj);
          });
          // console.log(self.xlscList)

          if (self.xlscList.length) {
            this.$message.success('上傳成功')
　　　　　　　　// 獲取數據后，下一步操作
          } else {
            this.$message.error('空文件或數據缺失，請重新選擇文件！')
          }
        }
      })
    },
　　　// 讀取文件
　　 file2Xce(file) {
      return new Promise(function(resolve, reject) {
        const reader = new FileReader();
        reader.onload = function(e) {
          const data = e.target.result;
          this.wb = Xlsx.read(data, {
            type: "binary"
          });
          const result = [];
          this.wb.SheetNames.forEach(sheetName => {

            result.push({
              sheetName: sheetName,
              sheet: Xlsx.utils.sheet_to_json(this.wb.Sheets[sheetName])
            })
          })
          resolve(result);
        }
        reader.readAsBinaryString(file.raw);
      })
    }

注： 以上的導出的excel不能自定義樣式，需要一樣插件xlsx-style, 喜歡的同學可以自行研究