vue导出xlsx表格文件-简单粗暴

因为考虑到复用，所以简单封装了一下，需要的直接copy就行了

注意-后端返回的数据必须是execel的文件流！

1.创建exportExcel.js文件

2.创建函数名称以及返回值

export const exportExcel = (res) => {
}

 3.处理文件名称

let fileNameif (res.headers) {//处理文件名const contentDisposition = res.headers['content-disposition']if (contentDisposition) {fileName = window.decodeURI(res.headers['content-disposition'].split('=')[1])}} else {Message({message: '无文件名',type: 'error',})}

接口的hearders需带有content-disposition字段，这个和后端对接好。

4.处理返回的文件流以及处理导出

//这个响应值对应自己的
if (res.data.data) {//处理文件流let blob = new Blob([res.data.data], {type: 'application/vnd.ms-excel',})let url = window.URL.createObjectURL(blob)const link = document.createElement('a') // 创建a标签link.href = urllink.download = fileNamelink.click()URL.revokeObjectURL(url)} else {Message({message: '导出失败',type: 'error',})}

5.在对应的页面导入文件以及调用

import { exportExcel } from '@/plugin/exportExcel.js'// 调文件导出方法
exportExcel(res)

这样就可以成功的导出文件啦！

下面贴一下完整的js代码

// 统一处理文件导出
export const exportExcel = (res) => {let fileNameif (res.headers) {//处理文件名const contentDisposition = res.headers['content-disposition']if (contentDisposition) {fileName = window.decodeURI(res.headers['content-disposition'].split('=')[1])}} else {Message({message: '无文件名',type: 'error',})}if (res.data.data) {//处理文件流let blob = new Blob([res.data.data], {type: 'application/vnd.ms-excel',})let url = window.URL.createObjectURL(blob)const link = document.createElement('a') // 创建a标签link.href = urllink.download = fileNamelink.click()URL.revokeObjectURL(url)} else {Message({message: '导出失败',type: 'error',})}
}

有疑问的私聊我即可 

觉得实用的小伙伴，点一下点赞、收藏哦

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！