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

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