在做需求過程中我們大概率會遇到在瀏覽器中下載文件的需求
第一種是通過 window 對象的 open 方法進(jìn)行操作，將文件 url 直接在瀏覽器中打開即可下
window.open(url)
第二種是通過 a 標(biāo)簽滚停，設(shè)置 href 為 url 值迹卢，點(diǎn)擊 a 標(biāo)簽即可完成下載慎冤。
<a href="url" />
上面兩種文件下載方式都會存在一個問題默责，就是 pdf 文件會直接在瀏覽器中打開而不是直接下載
解決方案
這種需求的解決方式就是將PDF文件的 MIME type 改為 application/octet-stream 并加入 Content-Disposition:attachment header，原本的 pdf 文件 MIME type 為 application/pdf郊尝，瀏覽器識別到這個 type 之后會自動在瀏覽器打開秕铛，所以說我們在這里修改 type 即可约郁。
修改的方法有兩種，一種是在后端進(jìn)行修改但两，上傳文件或者返回文件的時候進(jìn)行操作鬓梅，但是絕大多數(shù)情況下文件都是存儲到 cdn 服務(wù)器中的，后端也不方便對其進(jìn)行操作谨湘，這個時候就需要前端來修改了绽快。
fetch(url, {
method: 'get',
responseType: 'arraybuffer',
}).then(res => {
if (res.status !== 200) {
return res.json()
}
return res.arrayBuffer()
}).then(blobRes => {
// 生成 Blob 對象，設(shè)置 type 等信息
const e = new Blob([blobRes], {
type: 'application/octet-stream',
'Content-Disposition':'attachment'
})
// 將 Blob 對象轉(zhuǎn)為 url
const link = window.URL.createObjectURL(e)
let a = document.createElement('a');
a.href = link;
a.download = '文件名稱';
a.click();
}).catch(err => {
console.error(err)
})
