后端返回的文件流数据如下图所示：
一、pdf预览功能：
1、接口封装
export function download(data) {
return axios({
url: 'xxx.pdf',
method: 'get',
params: data,
responseType: 'arraybuffer', // 一定要设置响应类型，否则页面会是空白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
前端借鉴链接：https://www.jianshu.com/p/950cb898c978?utm_campaign=hugo
