vue 中PDF实现在线浏览，禁止下载，打印

需求：在线浏览pdf文件，并且禁止掉用户下载打印的效果。

分析：普通的iframe、embed标签都只能实现在线浏览pdf的功能，无法禁止掉工具栏的下载打印功能。只能尝试使用插件，pdfobject.js这个插件可以实现功能，而且操作简单，但是兼容性不好，不兼容火狐、ie浏览器。于是替换成pdf.js

实现：因为不想在服务器放太多东西，所以引用pdf后的方法都是自己调用的api实现的。

以下仅是核心代码，css就不展示了。

1.首先npm下载pdf.js            

npm isntall --save pdfjs-dist

2.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的样式和想要使用的功能 。这里是上一页，下一页，全屏功能

进入全屏

 

 

上一页

Page:/

下一页

 

 

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 

 

letvm=this

this.pageRendering=true;

letcanvas=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的宽度

varviewport=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)

varrenderContext= {

canvasContext:vm.ctx,

viewport:viewport

                };       

varrenderTask=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() {//上一页     

letvm=this

if(vm.pageNum<=1) {

return;

            }     

vm.pageNum--;

this.queueRenderPage(vm.pageNum);

},  

下一页

nextpage() {//下一页     

letvm=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

letvm=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);

 

出处：https://www.jianshu.com/p/ecd34ab2cf55