vue+element-ui 前端导出excel表格功能

1、安装依赖插件

npm install -S file-saver xlsx
npm install -D script-loader

2、导入两个JS
在src目录下新建excel文件夹，里面放入Blob.js和Export2Excel.js两个JS文件
下载Blob.js和Export2Excel.js 提取码: 6p7x

3、main.js 引入文件

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

4、Vue组件页面使用

1. 下载按钮

<el-button size="medium" @click="downloadFile(excelData)">下载</el-button>

2. 在使用的组件页面的 methods中添加

			//下载表格
            downloadFile()
            {
                require.ensure([], () => {
                    const {export_json_to_excel} = require('../../excel/Export2Excel'); //路径需要根据你的文件目录修改正确
                    const tHeader = ['客户姓名','客户电话','地市']; // tHeader设置Excel的表格第一行的标题
                    const filterVal = ['customerName','contactMobile','city']; // 上面的customerName、contactMobile、city是tableData里对象的属性
                    const list = this.tableData;  //把data里的tableData存到list
                    const data = this.formatJson(filterVal, list);
                    export_json_to_excel(tHeader, data, '等待上门服务表格');
                })
            },
            formatJson(filterVal, jsonData)
            {
                return jsonData.map(v => filterVal.map(j => v[j]))
            },

运行时报如下所示的错误：（是因为Export2Excel.js的路径需要改下：）

还有可能报这样的：（这是因为4-2 methods里Export2Excel.js的require路径不对）

温馨提示：
这算纯前端下载 是基本不用重新调用后端接口的 直接把tableData里的数据塞到表格里下载
如果原本后端接口返回的是无分页的list数据 这样写就能达到想要的效果

那么问题来了，如果后端返回的是分页的数据，如默认返回10条，这里前端tableData只能拿到10条数据，下载的话，只能下载到tableData里的10条数据。搜索结果小于等于10条也不会发现bug~

这里我的想法就是点击下载的时候，重新获取当前的搜索条件，请求后端提供的无分页数据请求接口，把拿到的数据塞到新的tableData里，这样既不影响前端的渲染，下载完销毁。
但是总感觉这样有点蠢，有木有更好的办法？