后端返回的文件流數(shù)據(jù)如下圖所示：
一、pdf預(yù)覽功能：
1辛藻、接口封裝
export?function?download(data)?{??????
????return?axios({????
????????url:?'xxx.pdf',????????
????????method:?'get',? ? ? ?
? ? ? ? ?params:?data,????????
? ? ? ? ?responseType:?'arraybuffer', //?一定要設(shè)置響應(yīng)類型捌省，否則頁面會(huì)是空白pdf?
????}
)}
2苫纤、頁面
<template>
??<div?class="wrapper">
??????<div?v-if="pdfUrl">
????????<Pdf?:src="pdfUrl"></Pdf>
??????</div>
??</div>
</template>
<script>
import?Pdf?from?'vue-pdf'
import?CMapReaderFactory?from?'vue-pdf/src/CMapReaderFactory.js'
export?default?{
??name:?"pdf",
??components:?{Pdf},
??data()?{
????return?{
????????pdfUrl:?null,?//pdf地址
????};
??},
??methods:?{
??????download(){
????????var?params?=?{}
????????download(params).then(res=>?{
????????????const?binaryData?=?[];
????????????binaryData.push(res);
????????????//獲取blob鏈接
????????????var?url?=?window.URL.createObjectURL(new?Blob(binaryData,?{?type:?'application/pdf;charset-UTF-8'?}));
????????????this.pdfUrl?=?Pdf.createLoadingTask({
????????????????????????????url:?url,
????????????????????????????cMapUrl:?'https://cdn.jsdelivr.net/npm/pdfjs-dist@2.5.207/cmaps/',
????????????????????????????cMapPacked:?true
????????????????????????})
????????})
??????},
??},
??created()?{
????this.download()
??},
};
</script>
<style?lang="less"?scoped>
????.wrapper?{
????????background:?#F4F6F8;
????????height:?100vh;
????}
</style>
后端借鑒鏈接：https://blog.csdn.net/jinold/article/details/96836230
前端借鑒鏈接：http://www.reibang.com/p/950cb898c978?utm_campaign=hugo
