当我们在处理后台返回的文件下载数据时,有时候会遇到后台返回数据格式为二进制流的情况。这种格式的数据在前端界面上无法直接显示,需要通过特殊的处理方式进行文件下载。下面是完整攻略。
1. 后台设置content-type
第一步是需要后台在返回数据时设置content-type为“application/octet-stream”,这个content-type是二进制流格式的标准类型。
下面是Java后台的示例代码:
// 设置响应头Content-Type
response.setContentType("application/octet-stream");
// 设置响应头打开方式为attachment,表示需要进行文件下载
response.setHeader("Content-Disposition", "attachment;filename=" + file.getName());
2. 前端通过axios接收数据
接下来,前端通过axios接收后台返回的二进制流数据。在发送axios请求时需要设置responseType为‘blob’,表示返回的数据为二进制流。
axios({
method: 'get',
url: '/fileDownload',
responseType: 'blob', // 告诉axios需要返回二进制流数据
params: {
fileName: 'example.doc'
}
}).then(response => {
const blob = new Blob([response.data])
const fileName = response.headers['content-disposition'].split('=')[1] // 获取文件名
// 创建一个a标签,利用浏览器内置下载功能进行文件下载
const downloadLink = document.createElement('a')
downloadLink.href = URL.createObjectURL(blob)
downloadLink.download = fileName
document.body.appendChild(downloadLink)
downloadLink.click()
document.body.removeChild(downloadLink)
})
在axios获取数据后,需要将获取到的数据转换成blob对象。之后,我们需要从response header里获取content-disposition变量,来获取文件名。接着,我们创建一个a标签,设置href属性为blob链接,download属性为文件名,然后调用click方法来触发下载。
示例一:下载图片
假设后台返回一张图片,我们先通过axios获取数据,然后将获取到的blob数据转换成URL,将URL赋值给一个img元素的src属性,在页面上渲染该图片。
axios({
method: 'get',
url: '/imageDownload',
responseType: 'blob',
}).then(response => {
const blob = new Blob([response.data])
const imgUrl = URL.createObjectURL(blob)
const img = document.createElement('img')
img.src = imgUrl
document.body.appendChild(img)
})
示例二:下载PDF文件
假设后台返回一个PDF文件,我们先通过axios获取数据,然后将获取到的数据转换成blob对象,最后通过设置a标签的href来触发下载。
axios({
method: 'get',
url: '/pdfDownload',
responseType: 'blob',
}).then(response => {
const blob = new Blob([response.data], {type: 'application/pdf'})
const fileName = response.headers['content-disposition'].split('=')[1]
const downloadLink = document.createElement('a')
downloadLink.href = URL.createObjectURL(blob)
downloadLink.download = fileName
document.body.appendChild(downloadLink)
downloadLink.click()
document.body.removeChild(downloadLink)
})
以上就是使用Vue进行文件下载的完整攻略,注意,在实际使用过程中还需要进行细节处理,比如服务器响应时间较长时的loading问题、异常处理等。
本站文章如无特殊说明,均为本站原创,如若转载,请注明出处:vue后台返回格式为二进制流进行文件的下载方式 - Python技术站