Vue中使用pdf.js通过流的方式传参给pdfviewer.html

pdf.js可以通过链接和流的方式展示pdf，由于后台接口不想保存缓存文件生成链接，直接返回流的方式在pdf.js中展示，链接比较方便简单，但是流的方式相对就比较繁琐。

项目中vue->html大概流程：

vue通过html模板参数调用pdf生成接口->返回pdf流传参给pdf.js->pdf.js解析展示。

起初的实现方式sessionStore保存pdf流：

vue中通过sessionStore保存返回的pdf流数据，在pdf.js中获取然后解析。实现结果是可以的，但是存在一个sessionStore存储大小5M限制问题，如果后台返回的流大于5M，就不能正常显示。

间接实现方式sessionStore保存pdf生成参数：

通过sessionStore传入生成pdf的参数（html code），在pdf.js中调用接口返回流并解析展示pdf。该实现方式同样存在生成的pdf参数大于5M的情况，尤其是参数中如果嵌入图片就难免会大于5M(生成pdf的参数主要是html，如果带图片类的，仍然会>5M，但是如果不是这种形式，其实是可以采用这种方式)。

通过vuex共享方式，由于涉及到pdfview.html 原生的js，因此需要嵌入的和改造的比较多，也不知道是否会存在其他影像，因此放弃。

最终方式通过postMessage传参的方式：

// vue 代码
// 获取pdf.js 嵌入的iframelet pdfViewerFrame = document.getElementById("pdfViewer");let _pdfViewerFrame = document.getElementById("pdfViewer").contentWindow;axios.post('获取pdf的接口url'// 生成pdf的参数数据{ data: this.jsonData, thtml: this.elHtmlCode },{}).then((res) => {// 注释部分为原有实现方式//sessionStorage.setItem("pdfData", res.data.content.filedata);pdfViewerFrame.src = "./pdfjs/web/pdfviewer.html";// 防治异步未加载成功pdfViewerFrame.onload = function(){// 加载成功后传递pdf base64数据_pdfViewerFrame.postMessage(res.data.content.filedata, '*');};}).catch(function (error) {console.log(error);});

      // pdfjs pdfviewer.html中部分代码var DEFAULT_URL = "";var BASE64_MARKER = ';base64,';//声明文件流编码格式var preFileId = "";var pdfAsDataUri;var pdfAsArray;// 监听获取postMessage中的参数window.addEventListener("message", function(event){// pdf数据 base64（没有base64前缀）var data = event.data;this.pdfAsDataUri = data;this.pdfAsArray = convertDataURIToBinary(pdfAsDataUri);this.DEFAULT_URL = pdfAsArray;console.log(DEFAULT_URL)// viewer.js用于渲染pdf数据的，默认读取DEFAULT_URL，如果初始化时DEFAULT_URL没有数据则渲染会失败，这里存在异步的问题，因此需要改为动态加载viewer.jsvar head = document.getElementsByTagName('head')[0];var script = document.createElement('script');script.src = "viewer.js";script.type = 'text/javascript';head.appendChild(script);});// pdf流数据转换function convertDataURIToBinary(dataURI) { //编码转换var raw = window.atob(dataURI);//这个方法在ie内核下无法正常解析。var rawLength = raw.length;//转换成pdf.js能直接解析的Uint8Array类型var array = new Uint8Array(new ArrayBuffer(rawLength));for (i = 0; i < rawLength; i++) {array[i] = raw.charCodeAt(i) & 0xff;}return array;}

关键的几点：

调用postMessage的方法对象是_pdfViewerFrame，而非pdfViewerFrame，这里有些文章使用的对象错误，因此无法传参成功。
“pdfViewerFrame.onload” 作用是iframe加载后再调用postMessage，防止异步向iframe子页面传参失败。
pdfviewer.html中“viewer.js” 动态加载，使用动态加载是因为viewer.js是用来渲染pdf的，起初iframe加载pdfviewer.html是没有pdf数据，是无法渲染的，因此需要在获取到解析后的pdf数据后再渲染，也就是再加载viewer.js 才能渲染出pdf。

至此pdf通过流数据方式的展示不再受大小限制了。

Vue中使用pdf.js通过流的方式传参给pdfviewer.html相关推荐

vue中使用pdf.js插件打包后不显示插件及打包后动态修改接口地址
最近写了一个项目需要在线展示pdf 实现方法是下载该插件并解压放到 static文件夹中地址:http://mozilla.github.io/pdf.js/ 我在项目中使用iframe嵌套的方式 ...
vue从后台获取新数据后刷新_vue传参页面刷新数据丢失问题
在做vue的时候,经常会遇到组件之间数据的传递问题,通过params或者query传参,但是,当页面刷新的时候,数据会丢失,找不到数据.今天经过总结,解决了这个问题.通过了一下几种情况进行传值: 通过 ...
Vue项目中利用pdf.js实现pdf内容滑选文字展示与搜索功能
Vue项目中利用pdf.js实现pdf内容滑选文字展示与搜索功能需求:在pdf中鼠标滑动选中一段文字,将选中文字展示到input框中(pdf在iframe中) 完成效果: 关于pdf的引用:我是直接 ...
vue 中展示PDF内容
vue 中展示PDF内容不久前有个需要改的需求,以前是直接根据链接让用户下载对应pdf文件来查看,最主要是给用户查看,然而这种并不是很安全的,其他用户可以进行下载或者使用pdf链接分享给其他人,所以 ...
前端vue项目(使用pdf.js) pdf展示及pdf工具栏放大缩小功能实现
前端vue项目(使用pdf.js) pdf展示及pdf工具栏放大缩小功能实现 1.vue项目pdf展示 2.pdf工具栏放大缩小功能文章目录前端vue项目(使用pdf.js) pdf展示及pdf工 ...
vue里使用pdf.js实现pdf文件的预览功能
引言:经过上一篇文章的测试,发现了以下问题: 兼容性不好不适用多语言场景(不能共用一套) 会出现跨域问题难于监控阅读状态不能控制下载状态在基于vue开发的移动项目中,如果预览的pdf数量不是很 ...
SpringBoot+Vue+Itext实现前端请求文件流的方式导出PDF时在指定位置添加照片
场景 SpringBoot+Vue+Itext实现前端请求文件流的方式下载PDF: SpringBoot+Vue+Itext实现前端请求文件流的方式下载PDF_BADAO_LIUMANG_QIZHI的 ...
vue js 定义对象_JS标准内置对象Proxy及Vue中的proxy.js文件
昔登铜井望法华,葱茏螺黛浮蒹葭.今登法华望铜井,湖水迷茫烟色瞑.-- <登法华寺山顶> Proxy是什么 Proxy是JS标准内置对象中的一个对象.用于创建一个对象的代理.从而实现对对象操 ...
vue中config/index.js:配置的详细理解
当我们需要和后台分离部署的时候,必须配置config/index.js: 用vue-cli 自动构建的目录里面 (环境变量及其基本变量的配置) 1 2 3 4 5 6 7 8 9 10 11 12 ...
vue中解决three.js出现内存泄漏丢失上下文问题
vue中解决three.js出现内存泄漏丢失上下文问题参考文章: (1)vue中解决three.js出现内存泄漏丢失上下文问题 (2)https://www.cnblogs.com/lichuank ...