pdf在线预览 pdf.js的使用
生活随笔
收集整理的這篇文章主要介紹了
pdf在线预览 pdf.js的使用
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
1.官網：https://mozilla.github.io/pdf.js/
2、使用方法
1） 通過官網，下載pdfJs插件包，放至項目中；
window.open("./js/pdfJS/web/viewer.html?file=AngularJS權威指南.pdf" );
2）將下載的pdfJS插件包放至服務器中將pdfJS項目跑起來，本案例中將pdfJS文件通過tomcat部署
3）當文件和viewer.html不同路徑時（千萬注意文件路徑，否則無法正常預覽）
4）當文件為遠程服務器上的文件，我們有文件的路徑時，需要將http路徑進行轉碼：
function methodsOne() { //法一// window.open("./js/pdfJS/web/viewer.html?fileAngularJS權威指南.pdf" );//文件和viewer.html同路徑// window.open("http://localhost:8888/pdfJS/web/viewer.html?file=AngularJS權威指南.pdf" );//文件和viewer.html同路徑// window.open("./js/pdfJS/web/viewer.html?file=/pdf/files/AngularJS權威指南.pdf"); //文件和viewer.html 不同路徑，注意路徑 let fileUrl = encodeURIComponent('http://10.162.201.40:8005/dev/leck/2022/0215/11_.122qqq_1_092319.pdf') //將路徑轉碼window.open("http://localhost:8888/pdfJS/web/viewer.html?file=" + fileUrl);}
（如預覽遠程服務器上的文件跨域：
- 則將vierwe.js中跨域認證注釋即可（親測有效）：
- 將遠程文件換成文件流，直接當參數傳遞：file=文件流數據（未嘗試）
）
注：以上四種寫法的效果如下所示：
// window.open("./js/pdfJS/web/viewer.html?fileAngularJS權威指南.pdf" );//文件和viewer.html同路徑
// window.open("http://localhost:8888/pdfJS/web/viewer.html?file=AngularJS權威指南.pdf" );//文件和viewer.html同路徑
window.open("./js/pdfJS/web/viewer.html?file=/pdf/files/AngularJS權威指南.pdf");//文件和viewer.html 不同路徑，注意路徑
5）通過引用插件包中的pdf.js，讀出pdf文件中的內容，通過畫布在頁面中渲染出來，
所有該方法有幾個弊端：
- 只能將pdf一頁一頁的渲染，需要自己做分頁器；
- 翻頁效果沒有上述直接通過路徑預覽pdf的方式效果美觀；
- 如果要下載打印等操作，需要自己去實現相關功能，但上述直接通過路徑預覽pdf的方式中有附帶這些功能，也可將其隱藏；
實現該預覽方式，主要有以下幾個步驟：
- 引入pdf.js
- 獲取pdf信息：pdfjsLib.getDocument(’./files/AngularJS權威指南.pdf’) ，該方法放回的是promise，通過loadingTask.promise.then(function(pdf) {}) 可拿到pdf；
- 拿到pdf信息后，對pdf操作，pdf.getPage(pageNum).then(function(page) {}），至此已拿到單獨一頁的信息，通過canvas將page渲染即可
- 代碼如下所示：
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style type="text/css">#pdfBD {margin-left: 50%;transform: translateX(-50%);}#pdf-pagination {position: fixed;width: 100%;font-size: 14px;top: 100px;left: 10 px;z-index: 100;}span {margin-right: 10px;cursor: pointer;}</style></head><body><canvas id="pdfBD"> </canvas><div id="pdf-pagination"><span id="before" onclick="paginationClick(-1)">上一頁</span><span id="current">1</span><span id="next" onclick="paginationClick(1)">下一頁</span></div></body><!-- <script src="https://lib.baomitu.com/pdf.js/2.7.570/pdf.js" type="text/javascript" charset="utf-8"></script> --><script src="js/pdfJS/build/pdf.js" type="text/javascript" charset="utf-8"></script><script type="text/javascript">let pdfValue = null;let pageContent = {//法二，讀取到的pdf信息記錄currentPage: 0,//當前頁countPage: 0,//總頁數 }window.onload = function() {// methodsOne()methodsTwo()}function methodsOne() { //法一// window.open("./js/pdfJS/web/viewer.html?fileAngularJS權威指南.pdf" );//文件和viewer.html同路徑// window.open("http://localhost:8888/pdfJS/web/viewer.html?file=AngularJS權威指南.pdf" );//文件和viewer.html同路徑window.open("./js/pdfJS/web/viewer.html?file=/pdf/files/AngularJS權威指南.pdf"); //文件和viewer.html 不同路徑，注意路徑 document.getElementById("pdf-pagination").display = 'none'; //隱藏分頁器}function methodsTwo() { //法二var loadingTask = pdfjsLib.getDocument('./files/AngularJS權威指南.pdf');loadingTask.promise.then(function(pdf) {console.log(pdf)pdfValue = pdf;pageContent.countPage = pdf.numPages;changePage(pdf, 1)});document.getElementById("pdf-pagination").display = 'block'; //顯示分頁器}//翻頁 type：1 下一頁；-1：上一頁function paginationClick(type) {if (type == 1) {//下一頁pageContent.currentPage == pageContent.countPage ? "" : pageContent.currentPage += 1} else {//上一頁pageContent.currentPage == 1 ? "" : pageContent.currentPage -= 1}document.getElementById("current").innerHTML = pageContent.currentPagechangePage(pdfValue, pageContent.currentPage)}//通過頁碼，渲染當前頁currentPage信息：pdf：讀取的總的pdf信息，pageNum：需要獲取的頁數function changePage(pdf, pageNum) {if (pdf == null) return;pdf.getPage(pageNum).then(function(page) {// you can now use *page* herevar scale = 1.5;//放大倍數var viewport = page.getViewport({scale: scale,}); // Support HiDPI-screens.var outputScale = window.devicePixelRatio || 1;var canvas = document.getElementById('pdfBD');var context = canvas.getContext('2d');canvas.width = Math.floor(viewport.width * outputScale);canvas.height = Math.floor(viewport.height * outputScale);canvas.style.width = Math.floor(viewport.width) + "px";canvas.style.height = Math.floor(viewport.height) + "px";var transform = outputScale !== 1 ? [outputScale, 0, 0, outputScale, 0, 0] :null;var renderContext = {canvasContext: context,transform: transform,viewport: viewport};page.render(renderContext);});}</script></html>注：
該方法的預覽效果如下（此處頁面布局和分頁器僅簡單實現功能）
【完】
總結
以上是生活随笔為你收集整理的pdf在线预览 pdf.js的使用的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： linux连接http报301解决,ht
- 下一篇： linux cpu load 值,理解L