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