vue Export2Excel 导出excel方法
-
vue 安装相关的依赖
npm install -S file-saver npm install -S xlsx npm install -D script-loader
-
导入两个需要的js
-
这里我们不对后台的数据进行获取,直接用假数据,直接调接口同理
我们将数据放到tableData中
data () { return { tableData: [ {'index':'0',"nickName": "快乐天使", "name": "小a","sex": "1"}, {'index':'1',"nickName": "爷傲奈我何", "name": "小b","sex": "1"}, {'index':'2',"nickName": "应急食品", "name": "小c","sex": "0"} ] } }
-
重点的vue部分
//导出的方法 exportExcel() { require.ensure([], () => { const { export_json_to_excel } = require('../excel/Export2Excel'); const tHeader = ['序号', '昵称', '姓名','性别']; // 上面设置Excel的表格第一行的标题 const filterVal = ['index', 'nickName', 'name','sex']; // 上面的index、nickName、name是tableData里对象的属性 const list = this.tableData; //把data里的tableData存到list //这里如果我们有需要可以在这里对数据进行循环处理 例如 /* list.forEach(element => { if(element .sex==1){ element.sex="男"; }else{ element.sex="女"; } });*/ const data = this.formatJson(filterVal, list); export_json_to_excel(tHeader, data, '用户信息表'); }) }, formatJson(filterVal, jsonData) { return jsonData.map(v => filterVal.map(j => v[j])) }
-
可能会遇到的错误
-
[Script Loader] ReferenceError: require is not defined
-
TypeError: _this13.formatJson is not a function 忘记formatJson 方法了
-
Uncaught (in promise) TypeError: _this13.formatJson is not a function 忘记formatJson 方法了
-
vue.runtime.esm.js?2b0e:619 [Vue warn]: Error in v-on handler: "ReferenceError: request is not defined 需要import request from “@/utils/request”;
-
ReferenceError: request is not defined 需要import request from “@/utils/request”;
首先vue中的 formatJson方法是必不可少的
然后Export2Excel2.js文件中require(‘script-loader!vendor/Blob’)改为 require(’./Blob.js’) 也可以解决第一个问题
quire(‘script-loader!vendor/Blob’)改为 require(’./Blob.js’) 也可以解决第一个问题
报错这个要检查自己是否引入了request
import request from “@/utils/request”;