以下为需要用到的插件库
npm install file-saver@1.3.3 用来保存文件的
npm install --save-dev script-loader 由于由于这几个文件不支持import引入，所以我们需要`script-loader`来将他们挂载到全局环境下。
npm install xlsx //就是上边提到的js-xlsx这个东东
npm install jszip //导出为压缩文件////或者是将文件压缩
首先，先创建一个公共文件夹，里边存放封装的公共的导出的js,这里起名为vendor,里边放三个封装好的文件，分别为 blog.js \ Export2Excel.js \ Export2Zip.js
这三个文件下载链接：https://share.weiyun.com/5011fl4 密码：8d44kg
接下来就是在 vue 组件中使用了，在组件的 methods 中添加下载按钮执行的方法：
handleDownload() {
this.downloadLoading = true
// import('@/vendor/Export2Excel') 返回的是一个 Promise 对象
import('@/vendor/Export2Excel').then(excel => { // excel
// 将table表格对应的属性名转换成中文
const tHeader = ['timestamp', 'title', 'type', 'importance', 'status']
// table表格中对应的属性名
const filterVal = ['time', 'title', 'type', 'importance', 'status']
const data = this.formatJson(filterVal, this.list)
excel.export_json_to_excel({
header: tHeader,
data,
filename: 'table-list'
})
this.downloadLoading = false
})
},
// 洗数据
// 因为导出为 excel 的数据，必须是二维数组，this.list的每一项都是对象，因此，每一项必须转成数组
formatJson(filterVal, jsonData) {
return tableData.map(v => fields.map(j => v[j]));
//return jsonData.map(v => filterVal.map(j => {
// if (j === 'time') {
// v[j] = '时间';
// } else {
// return v[j]
// }
// }))
}
Export2Excel.js暴露了两个接口export_table_to_excel和export_json_to_excel,我们常用export_json_to_excel因为更加的可控一点
点击下载按钮的时候就可以进行下载了
