需求：在線瀏覽pdf文件，并且禁止掉用戶下載打印的效果。
分析：普通的iframe、embed標(biāo)簽都只能實(shí)現(xiàn)在線瀏覽pdf的功能，無法禁止掉工具欄的下載打印功能。只能嘗試使用插件，pdfobject.js這個(gè)插件可以實(shí)現(xiàn)功能，而且操作簡(jiǎn)單，但是兼容性不好，不兼容火狐、ie瀏覽器。于是替換成pdf.js
實(shí)現(xiàn)：因?yàn)椴幌朐诜?wù)器放太多東西，所以引用pdf后的方法都是自己調(diào)用的api實(shí)現(xiàn)的。
以下僅是核心代碼，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引進(jìn)去才不會(huì)有兼容問題
? ? PDFJS.workerSrc = require('pdfjs-dist/build/pdf.worker.min');
3.頁(yè)面布局pdf的樣式和想要使用的功能 。這里是上一頁(yè)，下一頁(yè)，全屏功能
進(jìn)入全屏
上一頁(yè)
Page:/
下一頁(yè)
4.一些方法。因?yàn)閯傔M(jìn)頁(yè)面的時(shí)候是固定的一塊區(qū)域，還需要有全屏功能。于是按pdf的原來大小算出了比例，按比例計(jì)算的viewport。如果沒有這個(gè)需求，可以直接定義viewport
data中定義的變量
wid:645,? ? ????//剛進(jìn)入頁(yè)面中的pdf容器的寬度
pdfDoc:null,//pdfjs 生成的對(duì)象? ? ?
pageNum:1,//? ? ?
pageRendering:false,
pageNumPending:null,
scale:null,//放大倍數(shù)? ? ?
page_num:0,//當(dāng)前頁(yè)數(shù)? ? ?
page_count:0,//總頁(yè)數(shù)? ? ?
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中定義的一個(gè)變量，最初設(shè)置的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;
? ? ? ? },
? 上一頁(yè)：
prevpage() {//上一頁(yè)? ? ?
letvm=this
if(vm.pageNum<=1) {
return;
? ? ? ? ? ? }? ? ?
vm.pageNum--;
this.queueRenderPage(vm.pageNum);
},??
下一頁(yè)
nextpage() {//下一頁(yè)? ? ?
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是服務(wù)器的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? ? ? //重新復(fù)制viewport
//? ? vm.wid= window.document.documentElement.clientHeight/vm.count
this.$refs.cpdf.style.width=window.document.documentElement.clientWidth
this.queueRenderPage(this.pageNum)
// 當(dāng)用戶按esc鍵退回到之前的大小，監(jiān)聽的退出全屏事件。重新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);
? ? ? ? ? ? ? ?
? ? ? ? ? ? ? ? ? ? ?
