vue-element-admin 导出excel
·
这个导出功能只能导出当前页的数据,想要全部导出,数组要是全部数据,具体代码如下
先在data数据源定义以下变量
downloadLoading: false,
filename: '测试',
autoWidth: true,
bookType: 'xlsx'
在methods定义两个方法,代码如下
// 这个函数名字绑定的是你上边的导出按钮
handleDownload() {
this.downloadLoading = true
// 这个文件是vue-element-admin里边自带的,跟着路径你就能找到,不用担心把报错
import('@/vendor/Export2Excel').then(excel => {
const tHeader = ['头像', '标题', 'Author', 'Readings', 'Date'] // 这个就是excel表格的头部名称
const filterVal = ['actvr', 'title', 'author', 'pageviews', 'display_time'] // 这个就是从导出的数据在你数组里的名字
const list = this.list // 这个就是你页面循环的那个数组,如果你想全部导出的话,数组就需要是全部数据
const data = this.formatJson(filterVal, list)
excel.export_json_to_excel({
header: tHeader,
data,
filename: this.filename, // 这个就是你导出的文件的名字
autoWidth: this.autoWidth,
bookType: this.bookType
})
this.downloadLoading = false
})
},
formatJson(filterVal, jsonData) {
return jsonData.map(v => filterVal.map(j => {
if (j === 'timestamp') {
return parseTime(v[j])
} else {
return v[j]
}
}))
}
这就可以导出了,这属于封装好的方法,没有走接口,
如果你们的导出需要走接口就可以导出全部数据的话,上边的所有东西可以不用,下面是走接口的代码。
// 导出excel
async handleDownload() {
this.downloadLoading = true
let parmas = {
id: this.listQuery.id,
realName: this.listQuery.realName,
sort: this.sort,
}
// 这是我的网络请求,你们可以写你们自己的
const res = await export_data({...parmas});
// 如果网络请求成功之后没有弹出文件,则需要下面的代码,这些是重点
const system = window.navigator.platform == "Win32" ? "window" : "mac"
let blob = new Blob([res], {type: "application/vnd.ms-excel"});
let url = window.URL.createObjectURL(blob);
let link = document.createElement('a');
link.download = `数据列表.${system == "mac" ? "xlw" : "xls"}` //下载的文件名
link.href = url;
link.click();
this.downloadLoading = false
},
这些做完之后,打开表格,可能乱码,则需要在请求里加上这行代码 responseType: 'blob',
// 导出数据列表
export function export_data(query) {
return request({
url: 'url',
method: 'get',
params: query,
responseType: 'blob',
})
}
然后等打开文件,乱码就解决了
更多推荐
已为社区贡献12条内容
所有评论(0)