前端如何下载⽂件流
前⾔
如果后台返回的是⽂件地址，那么前端直接通过 window.location.href 加⽂件地址，就可以下载⽂件；
但是如果后台返回的是⽂件流，那么前端就需要做⼀些处理；
其实前端处理的核⼼：就是将⽂件流转为⽂件，然后再模拟点击，实现前者的效果。
步骤
1. 封装⼀个下载⼯具
这个⼯具的作⽤就是，将获取的⽂件流转为⽂件，并模拟点击该⽂件，实现下载
先贴代码，download.js（可直接复制使⽤）
<pre class="md-fences md-end-block ty-contain-cm modeLoaded" spellcheck="false" lang="javascript" cid="n9" mdtype="fences" style="box-sizing: border-box; overflow: visible; font-family: var(--monospace); font-size: 0.9em; display: block; break-inside: avoid; text-align: left; white-space: normal;
background-image: inherit; background-size: inherit; background-attachment: inherit; background-origin: inherit; background-clip: inherit; background-color: rgb(248, 248, 248); position: relative !important; border:
1px solid rgb(231, 234, 237); border-top-left-radius: 3px; border-top-right-radius: 3px; border-bottom-right-radius: 3px; border-bottom-left-radius: 3px; padding: 8px 4px 6px; margin-bottom: 15px; margin-top: 15px; width: inherit; caret-color: rgb(51, 51, 51); color: rgb(51, 51, 51); font-style: normal; font-variant-caps: normal; font-weight: normal; letter-spacing: normal; orphans: auto; text-indent: 0px; text-transform: none; widows: auto; word-spacing: 0px; -webkit-text-size-adjust: auto; -webkit-text-
stroke-width: 0px; text-decoration: none; background-position: inherit; background-repeat: inherit;">export const download = (res, type, filename) => {
// 创建blob对象，解析流数据
const blob = new Blob([res], {
// 设置返回的⽂件类型
// type: 'application/pdf;charset=UTF-8' 表⽰下载⽂档为pdf，如果是word则设置为msword，excel为e
xcel
type: type
})
// 这⾥就是创建⼀个a标签，等下⽤来模拟点击事件
const a = ateElement('a')
// 兼容webkix浏览器，处理webkit浏览器中href⾃动添加blob前缀，默认在浏览器打开⽽不是下载
const URL = window.URL || window.webkitURL
// 根据解析后的blob对象创建URL 对象
const herf = ateObjectURL(blob)
// 下载链接
a.href = herf
/
/ 下载⽂件名，如果后端没有返回，可以⾃⼰写a.download = '⽂件.pdf'
a.download = filename
document.body.appendChild(a)
// 点击a标签，进⾏下载
a.click()
// 收尾⼯作，在内存中移除URL 对象
veChild(a)
vokeObjectURL(herf)
}</pre>
上⾯代码的重点是Blob对象，详情可参考：MDN⽂档：Blob对象
2. 获取⽂件流
这⾥就是调⽤后台接⼝，获取⽂件流
后台⽅法：
<pre class="md-fences md-end-block ty-contain-cm modeLoaded" spellcheck="false" lang="java" cid="n14" mdtype="fences" >@GetMapping(value =
"/download-file")
public byte[] downloadFile(String contractNo){
box sizing
log.info("=== 下载合同⽂件 ===");
byte[] bytes = service.ate().set("contractNo", contractNo));
return bytes;
}</pre>
前端获取⽂件流的⽅法：
<pre class="md-fences md-end-block ty-contain-cm modeLoaded" spellcheck="false" lang="javascript" cid="n16"
mdtype="fences" style="box-sizing: border-box; overflow: visible; font-family: var(--monospace); font-size: 0.9em; display: block; break-inside: avoid; text-align: left; white-space: normal; background-image: inherit; background-size: inherit; background-attachment: inherit; background-origin: inherit; b
ackground-clip: inherit; background-color: rgb(248, 248, 248); position: relative !important; border: 1px solid rgb(231, 234, 237); border-top-left-radius: 3px; border-top-right-radius: 3px; border-bottom-right-radius: 3px; border-bottom-left-radius: 3px; padding: 8px 4px 6px; margin-bottom: 15px; margin-top: 15px; width: inherit; caret-color: rgb(51, 51, 51); color: rgb(51, 51, 51); font-style: normal; font-variant-caps: normal; font-weight: normal; letter-spacing: normal; orphans: auto; text-indent: 0px; text-transform: none; widows: auto; word-spacing: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px; text-decoration: none; background-position: inherit; background-repeat: inherit;">
import { download } from '@/utils/download'
import { axios } from '@/utils/request'
async downloadFile (contractNo) {
const res = (this.downloadContractFilePath + contractNo, {
// 设置返回数据类型，这⾥我设置的是"arraybuffer"；如果不设置则下载下来的pdf会是空⽩
responseType: 'arraybuffer'
})
// 调⽤封装好的下载函数
download(res, 'application/pdf;charset=UTF-8', moment().format('YYYYMMDD') + '.pdf')
}</pre>
关于responseType可参考官⽹：sponseType - Web API 接⼝参考 | MDN ()
3. 点击标签a
最后我们创建⼀个标签a，来点击下载⽂件
<pre class="md-fences md-end-block ty-contain-cm modeLoaded" spellcheck="false" lang="html" cid="n20" mdtype="fences"

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。