vue中引用pdf.js，实现在线浏览禁止下载、打印的功能

需求：在线浏览pdf文件，并且禁止掉用户下载打印的效果。分析：普通的iframe、embed标签都只能实现在线浏览pdf的功能，无法禁止掉工具栏的下载打印功能。只能尝试使用插件，pdfobject.js这个插件可以实现功能，而且操作简单，但是兼容性不好，不兼容火狐、ie浏览器。于是替换成pdf.js实现：因为不想在服务器放太多东西，所以引用pdf后的方法都是自己调用的api实现的。以下仅是核心代码，css就不展示了。1.首先npm下载pdf.js            npm isntall --save pdfjs-dist2.created中引入pdf.js （刚开始使用import引入本地的pfd.js文件，谷歌浏览器没有问题。但是火狐无法正常显示）     let PDFJS = require('pdfjs-dist').PDFJS                         //PDF.JS必须require引进去才不会有兼容问题    PDFJS.workerSrc = require('pdfjs-dist/build/pdf.worker.min');3.页面布局pdf的样式和想要使用的功能 。这里是上一页，下一页，全屏功能 <span class="full" @click="fullScreen()">进入全屏</span><div ref="cpdf" > <div ref="contor"> <button @click="prevpage">上一页</button> <span>Page: <span v-text="page_num"></span> / <span v-text="page_count"></span></span> <button @click="nextpage">下一页</button> <!-- <button @click="fullScreen()">全屏</button> --> </div> <canvas class="canvasstyle" id="the-canvas" ref="canvas"></canvas> </div>
4.一些方法。因为刚进页面的时候是固定的一块区域，还需要有全屏功能。于是按pdf的原来大小算出了比例，按比例计算的viewport。如果没有这个需求，可以直接定义viewport
data中定义的变量

wid:645,     //刚进入页面中的pdf容器的宽度 pdfDoc: null, //pdfjs 生成的对象 pageNum: 1,// pageRendering: false, pageNumPending: null, scale: null,//放大倍数 page_num: 0,//当前页数 page_count: 0,//总页数
renderPage(num) { //渲染pdf let vm = this this.pageRendering = true; let canvas = this.$refs.canvas // Using promise to fetch the page vm.pdfDoc.getPage(num).then(function(page) { vm.scale=vm.wid/page.getViewport(1.0).width //vm.wid是在data中定义的一个变量，最初设置的pdf的宽度 var viewport = page.getViewport(vm.scale); // var viewport = page.getViewport(vm.scale); //alert(vm.canvas.height) canvas.height = viewport.height; canvas.width = viewport.width; // Render PDF page into canvas context console.log(vm.count) var renderContext = { canvasContext: vm.ctx, viewport: viewport }; var renderTask = page.render(renderContext); // Wait for rendering to finish renderTask.promise.then(function() { vm.pageRendering = false; if(vm.pageNumPending !== null) { // New page rendering is pending this.renderPage(vm.pageNumPending); vm.pageNumPending = null; } }); }); vm.page_num = vm.pageNum; },  上一页： prevpage() {//上一页 let vm = this if(vm.pageNum <= 1) { return; } vm.pageNum--; this.queueRenderPage(vm.pageNum); },   

下一页

nextpage() {//下一页 let vm = this if(vm.pageNum >= vm.page_count) { return; } vm.pageNum++; this.queueRenderPage(vm.pageNum); },

queueRenderPage(num) { if(this.pageRendering) { this.pageNumPending = num; } else { this.renderPage(num); } },

   渲染pdf文件。 this.pdf是服务器的pdf路径。
PDFJS.getDocument(this.pdf).then(function(pdfDoc_) { //初始化pdf that.pageNum=1 that.pdfDoc = pdfDoc_; that.page_count = that.pdfDoc.numPages
that.renderPage(that.pageNum); });    全屏：

this.winWidth = window.document.documentElement.clientWidth //改变pdf容器的宽高为全屏大小this.winHeight = window.document.documentElement.clientHeight let vm=this vm.wid=window.document.documentElement.clientWidth-2 //重新复制viewport // vm.wid= window.document.documentElement.clientHeight/vm.count
this.$refs.cpdf.style.width=window.document.documentElement.clientWidth this.queueRenderPage(this.pageNum)         // 当用户按esc键退回到之前的大小，监听的退出全屏事件。重新wid变量，渲染viewport
document.addEventListener("webkitfullscreenchange", function () { if(!document.webkitIsFullScreen){ vm.wid=645 vm.queueRenderPage(vm.pageNum) } },false)
document.addEventListener("fullscreenchange", function () { if(!document.fullscreen){ vm.wid=645 vm.queueRenderPage(vm.pageNum) } }, false);
document.addEventListener("mozfullscreenchange", function () { if(!document.mozFullScreen){ vm.wid=645 vm.queueRenderPage(vm.pageNum) } }, false); document.addEventListener("msfullscreenchange", function () { if(!document.msFullscreenElement){ vm.wid=645 vm.queueRenderPage(vm.pageNum) } fullscreenState.innerHTML = (document.msFullscreenElement)? "" : "not "; }, false);