vue前台获取后台给的pdf文档流展示

下载展示框架vue-pdf-signature执行命令 npm install vue-pdf-signature -save

在组件中引入

import pdf from 'vue-pdf-signature';
import CMapReaderFactory from 'vue-pdf-signature/src/CMapReaderFactory';
在
components: { pdf,CMapReaderFactory }
data（）{
　　wordDialog: {pdfSrc: ''}
}
在methods中
 1 opendList(list) {
 2             let formData = new FormData();
 3             formData.append('filePath', list.filePath);
 4             axios.request({
 5                 'url':  this.$api.relatedDocuments.dowlodFile,// 地址
 6                 'method':'post',
 7                 'data': formData,
 8                 'headers':{'Content-Type': 'application/json; charset=UTF-8'}, // 没有会乱码
 9                 'responseType':'blob' //没有文档会报错
10             }).then(res => {
11            
12                 this.$nextTick(() => {
13  
14                 const blob = new Blob([res.data], { type: 'application/pdf; charset=UTF-8' })
15                 this.wordDialog.pdfSrc =window.URL.createObjectURL(blob)
16                 this.wordDialog.loadPdf = true
17                 window.open(this.wordDialog.pdfSrc)//新窗口打开，借用浏览器去打印
18                });
19     
20     
21     
22             })
23                
24 })
View Code

 

            

posted on 2022-07-18 09:32  小雨子1993  阅读(1156)  评论(0)  编辑  收藏  举报

导航