vue实现excel导出,vue实现数据导出为excel
本文主要介绍了Vue前端导出后端返回的excel文件的方法，具有很好的参考价值。希望对你有帮助。如有错误或不足之处，请不吝赐教。
目录
下载前端导出和后端返回的excel文件处理文件(后端Excel导出)。后端文件流通过Blob下载拼接URL下载。
前端导出后端返回的excel文件
在网上搜索后，我决定采用Blob法，这也是一种值得推荐的方法。我在此做个记录。
页面：
首先，用下面的代码过滤并返回excel文件到后端请求接口：
const apiUrl=this。global . http URL /马莱/export/new/exportTackOutOrder
控制台.日志(this.form)
let param=new URLSearchParams()；
param.append(startDate ， 2019-01-01 )；
param.append(endDate ， 2019-02-01 )；
这个。$axios.post(apiUrl，param，{responseType: blob})。然后((res)={
console.log( res.data)
const link=document . createelement( a )
设blob=new Blob([res.data]，{ type: application/vnd . ms-excel })；
link.style.display=none
link . href=URL . createobjecturl(blob)；
让num=
for(设I=0；i 10i ){
num=Math.ceil(Math.random() * 10)
}
Link.setAttribute(download ， Takeaway Statistics _ num )。xlsx’)
document.body.appendChild(链接)
link.click()
document.body.removeChild(链接)
})
仔细看axios请求加了个responseType: blob配置，这是很重要的
您可以看到请求返回了一个Blob对象。如果没有正确添加response type:“Blob”参数，它将返回一个字符串而不是一个Blob对象。
然后会自动下载！
处理文件的下载(后端Excel导出)
大概有两种方法(通常对应是否需要携带令牌)，原理是通过A标签下载。
通过Ajax请求获取响应，转换成blob格式(主要用于类型处理)，并为其生成下载链接。下载后可以直接拼接网址，拼出对应的请求链接，直接访问(无需二次令牌认证)。
后端文件流
首先点击导出Excel，此处接口调用成功。
接下来我们来看看后台返回的数据，是文件流格式(OutputStream)。
在处理之前，说几个要注意的点！！！
1.注意：后端在这里一般会设置如下几个请求头
后端也可以打开jwt令牌认证。如果是，请转到第2点请求拦截设置头。
注意： 由于跨域浏览器处于安全考虑不让自定义响应头通过 JS 获取，也就是说Content-Disposition的前端可以在网络中看到，但是无法通过JS获取。在这里，后端需要暴露它。
默认情况下，跨域情况只公开六个属性：Cache-Control、Content-Language、Content-Type、Expires、Last-Modified、Pragma。
//将返回类型设置为excel
response . set content type( application/vnd . ms-excel；charset=UTF-8 )；
//将返回文件名设置为filename.xls
response . set header( Content-Disposition ， filename . xls )；
//无法缓存请求或响应消息。
response . set header(“Cache-Control”、“no-Cache”)；
//公开Content-Disposition，这样就可以用JS得到了
response . set header( Access-Control-Expose-Headers ， Content-Disposition )。
2.注意：前端在 Axios 请求和响应拦截的时候，需要对其进行处理
一般我们会设置拦截请求的头。这里我们就简单处理一下，实际上是根据不同的情况设置头。
为了响应拦截，我们通常返回response.data，但是这里我们需要返回整个响应(因为文件名在头中)。
从“axios”导入axios
从“@/utils/auth”导入{ getToken }
从“@/global”导入{ AUTHOR_KEY }
const service=axios.create({
base URL:process . ENV . node _ ENV=== development ？ : http://127.0.0.1:9999
withCredentials: true，
超时：5000
})
//请求拦截器
service . interceptors . request . use(
配置={
config . headers[AUTHOR _ KEY]=getToken()
返回配置
},
error=console.log(错误)
)
//响应拦截器
服务.拦截器.响应.使用(
响应={
if(response . config . response type=== blob ){
返回响应
}
返回响应数据
},
error=console.log(错误)
)
导出默认服务
接下来要处理这个文件流，大概有两种方法（通常对应的是需要不需要携带令牌),原理都是通过a标签下载
通过埃阿斯请求，拿到回应，转换为一滴格式（主要是为了处理类型),为其生成下载链接，下载即可拼接URL，拼出来对应请求链接，直接访问即可
通过 Blob 下载
一滴通常用于存储大文件，典型的一滴内容是一张图片或一个音频
默认情况下爱可信不会处理二进制数据，即请求可以正常被浏览器接收，但爱可信不会去处理。需要在请求的时候设置响应类型：“blob”才可以
拿到文件流之后，需要生成一个统一资源定位器才可以下载，可以通过URL.createObjectURL()方法生成一个链接a标签添加文件名正常情况下，通过window.location=url就可以下载文件。浏览器判断这个链接是一个资源而不是页面的时候，就会下载文件。但是通过文件流生成的全球资源定位器(统一资源定位器)对应的资源是没有文件名的，需要添加文件名。这时候可以用到下载属性指定下载的文件名由于有浏览器问题可能会出现内容-处置匹配不到，最好做一下判断看内容-处置和内容-处置哪个能取到
const mimeMap={
xlsx: application/vnd.ms-excel ，
zip:应用程序/zip ，
}
将常数导出到Excel=params={
退货请求({
方法：“得到”，
URL:"/dayReportToExcel/toExcel "，
响应类型：“blob”，
参数
}).然后(res=resolveBlob(res，mimeMap.xlsx))
导出函数resolveBlob(res，mimeType) {
//创建a标签，并处理二级制数据
const aLink=文档。createelement( a )
const blob=new Blob([res.data]，{ type: mimeType })
//生成下载链接
常量URL=window .URL window.webkitURL
阿林克。href=URL。createobjecturl(blob)
//设置下载文件名称
让文件名=
if(资源头[内容-处置])fileName=资源头[内容-处置]
if(资源头[内容-处置])fileName=资源头[内容-处置]
aLink.setAttribute(下载，文件名)
//下载
文档。身体。appendchild(aLink)
aLink.click()
//释放统一资源定位器对象
窗户URL.revokeObjectURL(aLink.href)
文档。身体。移除子项(aLink)
}
注意：一般情况下文件名都是需要匹配的，后端传过来的可能是这样的，首选需要德科杜里解码一下，再用正则把文件名匹配出来（替换设置下载文件名那里即可)
导出函数resolveBlob(res，mimeType) {
const aLink=文档。createelement( a )
const blob=new Blob([res.data]，{ type: mimeType })
常量pat=新regexp(filename=([^；] \\.[^\\.] ))
让内容处置
if(RES . headers[ content-disposition ])content disposition=RES . headers[ content-disposition ]
if(RES . headers[ Content-Disposition ])Content Disposition=RES . headers[ Content-Disposition ]
常量结果=pat。exec(解码uri(内容处理))
设文件名=结果结果[1]
常量URL=window .URL window.webkitURL
阿林克。href=URL。createobjecturl(blob)
//如果内容-处置没有暴露，给文件一个默认名字
如果(文件名==空)文件名=日报表
aLink.setAttribute(下载，文件名)
文档。身体。appendchild(aLink)
aLink.click()
//释放统一资源定位器对象
窗户URL.revokeObjectURL(aLink.href)
文档。身体。移除子项(aLink)
}
拼接 URL 下载
如果可以直接通过统一资源定位器下载文件，则可以不需要发送埃阿斯请求（前提是没有令牌、标题验证),直接下载
可以使用 a 标签进行下载
从" qs "导入全国工业产品生产许可证
导出函数downloadExcel(params) {
常量URL=window。位置。origin /dayReportToExcel/toExcel？qs.stringify(参数)
const aLink=文档。createelement( a )
aLink.setAttribute(download ，)
aLink.setAttribute(target ， _blank )
aLink.href=url
aLink.click()
}
可以使用 window.open(url, _blank)
从" qs "导入全国工业产品生产许可证
导出函数downloadExcel(params) {
常量URL=window。位置。origin /dayReportToExcel/toExcel？qs.stringify(参数)
window.open(url， _blank )
}
以上为个人经验，希望能给大家一个参考，也希望大家多多支持我们。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。