vue 中PDF實現線上瀏覽，禁止下載，列印
阿新 • • 發佈：2022-04-19
需求：線上瀏覽pdf檔案，並且禁止掉使用者下載。
未測試
分析：普通的iframe、embed標籤都只能實現線上瀏覽pdf的功能，無法禁止掉工具欄的下載列印功能。只能嘗試使用外掛，pdfobject.js這個外掛可以實現功能，而且操作簡單，但是相容性不好，不相容火狐、ie瀏覽器。於是替換成pdf.js
實現：因為不想在伺服器放太多東西，所以引用pdf後的方法都是自己呼叫的api實現的。
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);
作者：Y丶小琪
連結：https://www.jianshu.com/p/ecd34ab2cf55
來源：簡書
著作權歸作者所有。商業轉載請聯絡作者獲得授權，非商業轉載請註明出處。
出處：https://www.jianshu.com/p/ecd34ab2cf55