Vue 前端下載 Excel

一、準備插件

下載地址（別人CSND 免費下載，好人一生平安）：https://download.csdn.net/download/hqtc0704/10642331

二、Export2Excel.js 插件的調用 Bolb.js

 

三、下載Excel，自己寫個函數調用下面handleDownload函數

handleDownload() {
      this.downloadLoading = true;
      require.ensure([], () => {
        const {
          export_json_to_excel
        } = require('../../../../static/js/Export2Excel.js'); // 這個地址和頁面的位置相關，這個地址是Export2Excel.js相對於頁面的相對位置
        const tHeader = ["序號", "客戶", "產品型號", "系列號", "銷售日期", "備註"]; // 這個是表頭名稱 可以是iveiw表格中表頭屬性的title的數組
        const filterVal = ["index", "customerName", "machineModel", "seriesNumber", "shipmentTime", "remarks"]; // 與表格數據配合 可以是iview表格中的key的數組
        const list = [{
            "index": "1",
            "customerName": "你好1",
            "machineModel": "你好2",
            "seriesNumber": "你好3",
            "shipmentTime": "你好4",
            "remarks": "你好5"
          },
          {
            "index": "2",
            "customerName": "hello world 1",
            "machineModel": "hello world 2",
            "seriesNumber": "hello world 3",
            "shipmentTime": "hello world 4",
            "remarks": "hello world 5"
          },
        ]; //表格數據，iview中表單數據也是這種格式！
        const data = this.formatJson(filterVal, list)
        export_json_to_excel(tHeader, data, '列表excel'); // 列表excel，這個是導出表單的名稱
        this.downloadLoading = false
      })
    },
    formatJson(filterVal, jsonData) {
      return jsonData.map(v => filterVal.map(j => v[j]))
    },

四、額外擴展

iview 的 table 組件有下載csv文件（CSV 逗號分隔值文件格式）的功能，其中的數據格式和Export2Excel.js 的格式相似，無縫連接。

csv文件解釋：百度百科

獲取Table表格數據，（不會用iview那就沒辦法了）

<Table ref="table"></Table>

this.$refs.table.exportCsv({ filename: 'The original data' });

 

其它導出Excel 的做法：https://www.php.cn/js-tutorial-403064.html