vue实现预览pdf功能 |
您所在的位置：网站首页 › 网页pdf预览 › vue实现预览pdf功能 |
vue实现预览pdf功能
|
vue页面中的一部分实现预览pdf功能 一、全屏预览模式先说直接全屏预览的，直接axios获取到数据，将流转为二进制文件， 可以window.open(后端返回文件流，前端把流转成url，在使用window.open就会打开一个新标签页全屏展示pdf) 也可以嵌入到a标签的href属性中 二、利用pdf.js嵌入到iframe中预览第一步跟全屏一样，就是最后打开方式不一样pdf.js官网下载pdf.js文件将文件解压缩，将里面的build和web文件夹放在static目录下面，一定要是static目录目录结构如下
附代码：vue组件中： 1首先通过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 }
|
接着在组件里就可以直接使用了，iframe的原理是将一个html页面嵌入在另一个html页面中【本文地址】
今日新闻 |
推荐新闻 |