背景：正好最近碰到了這種需求，記錄下來(lái)珍促，方便以后查看铃辖。
后端返回的文件流數(shù)據(jù)如下圖所示：
后臺(tái)返回?cái)?shù)據(jù).png
一、pdf的預(yù)覽
一開始的時(shí)候百度了很多方法猪叙，有建議用pdfJs插件的娇斩，有iframe嵌套實(shí)現(xiàn)的，最后發(fā)現(xiàn)了一種及其簡(jiǎn)便的實(shí)現(xiàn)方法：
pdfPreview(url){
this.$http({
url: `account/registerOpen/${url}`,
method: 'get',
responseType: 'arraybuffer', //一定要設(shè)置響應(yīng)類型穴翩，否則頁(yè)面會(huì)是空白pdf
params: { accountId: id, lang: 'en_US' }
}).then(res => {
const binaryData = [];
binaryData.push(res);
//獲取blob鏈接
this.pdfUrl = window.URL.createObjectURL(new Blob(binaryData, { type: 'application/pdf' }));
window.open(this.pdfUrl);
}
});
}
}
二犬第、pdf的下載
下載也挺簡(jiǎn)單的，代碼如下：
pdfDownload(url){
const id = sessionStorage.getItem('idPdf').replace(/"/g, '');
this.$http({
url: `account/registerOpen/${url}`,
method: 'get',
responseType: 'arraybuffer',
params: { accountId: id, lang: 'en_US' }
}).then(res => {
// 下載pdf
if (url === 'PerPdf/download' || url === 'PerCrsPdf/download' || url === 'PerWbenContractPdf/download') {
//type類型可以設(shè)置為文本類型芒帕，這里是pdf類型
this.pdfUrl = window.URL.createObjectURL(new Blob([res], { type: `application/pdf` }));
const fname = `個(gè)人開戶資料`; // 下載文件的名字
const link = document.createElement('a');
link.href = this.pdfUrl;
link.setAttribute('download', fname);
document.body.appendChild(link);
link.click();
}
});
}
