準備工作

1、安裝依賴包

npm install -S file-saver （-S用於生產環境）

npm install -S xlsx

npm install -D script-loader  （-D用於開發環境）

2、引入檔案

匯出excel需要兩個檔案：Blob.js和Export2Excel.js

連結：https://pan.baidu.com/s/137U5xaym8htX_q2AaVt6Mw 提取碼：xue9

在src下新建目錄vendor，將Blob.js和Export2Excel.js放進去，修改Export2Excel.js檔案內容，下列語句表示引入Blob.js，注意修改為自己工程中Blob.js對應的路徑，

require('script-loader!vendor/Blob')

或者，在webpack.base.conf.js中指定vendor的路徑，

    alias: {
      'vue$': 'vue/dist/vue.esm.js',
      '@': resolve('src'),
      'vendor': path.resolve(__dirname, '../src/vendor')
    }

下載

下載使用Export2Excel.js的export_json_to_excel函式實現

先寫一個按鈕，給一個click事件

<template>
  <div class="excelDiv">
    <el-button @click="download">下載</el-button>
    <div id="fileselect">
      <el-input style="margin-top: 16px" type="file"></el-input>
    </div>
  </div>
</template>
 

準備表格資料

table: [{
        id: 1,
        name: '測試1',
        age: 21
      }, {
        id: 2,
        name: '測試2',
        age: 22
      }, {
        id: 3,
        name: '測試3',
        age: 23
      }],

download函式

    download: function () {
      var tHeader = ['id', '姓名', '年齡'] // excel的表頭標題
      var filterVal = ['id', 'name', 'age'] // 需要匯出對應自己列表中的每項資料
      var list = this.table // 列表資料
      var data = this.formatJson(filterVal, list)
      export_json_to_excel(tHeader, data, 'excelname')
    }
 

其中export_json_to_excel(tHeader, data, ' excelname')是簡寫形式，對應的引數是

      excel.export_json_to_excel({
        header: tHeader,
        data,
        filename: 'excelname' // 檔名稱,若不寫匯出檔案可能不識別
      })

formatJson函式

    // 在整個列表的資料中過濾匯出自己需要的資料
    formatJson (filterVal, jsonData) {
      return jsonData.map(v => filterVal.map(j => v[j]))
    },

上傳讀取

上傳用input的type=”file”實現，讀取用FileReader，用xlsx的utils.sheet_to_json方法將讀取到的內容轉換成json資料，我們就可以就行下一步處理了。

  mounted: function () {
    this.$nextTick(function () {
      this.readFile()
    })
  },

    // 匯入裝置，監聽上傳檔案並讀取
    readFile: function () {
      let fileselect = document.querySelector('#fileselect')
      fileselect.addEventListener('change', function (e) {
        event.preventDefault()
        let file = e.target.files
        if (file.length <= 0) { // 如果沒有檔名
          return
        } else if (!/\.(xls|xlsx)$/.test(file[0].name.toLowerCase())) {
          this.$message({
            type: 'info',
            message: '上傳格式不正確，請上傳xls或者xlsx格式'
          })
          return
        }
        let reader = new FileReader()
        if (typeof FileReader === 'undefined') {
          this.$message({
            type: 'info',
            message: '您的瀏覽器不支援FileReader介面'
          })
          return
        }
        reader.readAsBinaryString(file[0])
        reader.onload = function (e) {
          try {
            var data = e.target.result
            var workbook = XLSX.read(data, { type: 'binary' })
            var wsname = workbook.SheetNames[0] // 取第一張表
            var ws = XLSX.utils.sheet_to_json(workbook.Sheets[wsname]) // 生成json表格內容          } 
          catch (e) {
            return false
          }
        }
      }.bind(this))
    }

注意XLSX需要引入

import XLSX from 'xlsx'

在讀取上傳檔案之前先判斷是不是excel檔案，主要通過後綴是否為‘xls’或者‘xlsx’來判斷，判斷方法有多種，我列出了三種方式以供參考，首先通過e.target.files[0].name獲取上傳檔案的名稱然後判斷

1、分割字串

         let arr = e.target.files[0].name.split('.')
          if (arr[1] !== 'xls' && arr[1] !== 'xlsx') {
            this.$message('上傳格式不正確，請上傳xls或者xlsx格式')
            return
          }

2、正則校驗

!/\.(xls|xlsx)$/.test(e.target.files[0].name.toLowerCase())

3、lastIndexOf() 方法檢索字串

e.target.files[0].name.lastIndexOf(".xls") > 0 || e.target.files[0].name.lastIndexOf(".xlsx") > 0

需要注意

ESLint語法會報錯Identifier 'export_json_to_excel' is not in camel case，不影響功能。