vue实现预览pdf功能

vue页面中的一部分实现预览pdf功能

一、全屏预览模式

先说直接全屏预览的，直接axios获取到数据，将流转为二进制文件，

• 可以window.open(后端返回文件流，前端把流转成url，在使用window.open就会打开一个新标签页全屏展示pdf)
• 也可以嵌入到a标签的href属性中

二、利用pdf.js嵌入到iframe中预览

第一步跟全屏一样，就是最后打开方式不一样
pdf.js官网下载pdf.js文件
将文件解压缩，将里面的build和web文件夹放在static目录下面，一定要是static目录
目录结构如下

接着在组件里就可以直接使用了，
iframe的原理是将一个html页面嵌入在另一个html页面中

1 <iframe ref="pdfCotainer" :src="pdfUrl" width="100%"></iframe>

附代码：
vue组件中：

1 <iframe ref="pdfCotainer" :src="pdfUrl" width="100%"></iframe>

首先通过axios调用后台接口获取流数据

 1 // 获取流
 2 export function getStream(url, params) {
 3   return new Promise((resolve, reject) => {
 4     axios.get(url, {
 5       params: params,
 6       responseType: 'arraybuffer' // 关键，必须要设置响应类型，否则pdf没有内容都是空白页 
 7     }).then(res => {
 8       resolve(res.data)
 9     }).catch(err => {
10       reject(err.data)
11     })
12   })
13 }

流转成二进制文件方法

 1 // 生成数据报告->pdf预览
 2     pdfPreview(year) {
 3       let param = {
 4         types: this.types,
 5         year: this.year
 6       }
 7       console.log('传递的参数为', param)
 8       getDatareportData(param).then(res => {
 9         console.log('调用生成数据报告接口返回数据', res)
10         const binaryData = [];
11         binaryData.push(res);       
12         this.pdfUrl = window.URL.createObjectURL(new Blob(binaryData, {type: 'application/pdf'}));
13         // window.open(this.pdfUrl);
14       })
15     }

但是这样iframe的高度始终是固定的，需要再动态改变一下高度

1 // 改变iframe高度
2 changeFrameHeight() {
3    var pdfCotainer = this.$refs.pdfCotainer;
4    pdfCotainer.height = document.documentElement.clientHeight;
5 }