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

需求:在线浏览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);


               

     




                     

推荐阅读更多精彩内容