pdf.js 呼叫內部方法手動渲染pdf
阿新 • • 發佈：2018-12-09
1、整理的程式碼，可自己梳理
var url = '//cdn.mozilla.net/pdfjs/tracemonkey.pdf'; PDFJS.workerSrc = '//mozilla.github.io/pdf.js/build/pdf.worker.js'; var pdfDoc = null, pageNum = 1, pageRendering = false, pageNumPending = null, scale = 0.8, canvas = document.getElementById('the-canvas'), ctx = canvas.getContext('2d'); /** * Get page info from document, resize canvas accordingly, and render page. * @param num Page number. */ //渲染某頁pdf內容 function renderPage(num) { pageRendering = true; pdfDoc.getPage(num).then(function(page) { var viewport = page.getViewport(scale); canvas.height = viewport.height; canvas.width = viewport.width; var renderContext = { canvasContext: ctx, viewport: viewport }; var renderTask = page.render(renderContext); renderTask.promise.then(function() { pageRendering = false; if (pageNumPending !== null) { renderPage(pageNumPending); pageNumPending = null; } }); }); document.getElementById('page_num').textContent = num; } //渲染佇列 function queueRenderPage(num) { if (pageRendering) { pageNumPending = num; } else { renderPage(num); } } //預覽前一頁 function onPrevPage() { if (pageNum <= 1) { return; } pageNum--; queueRenderPage(pageNum); } document.getElementById('prev').addEventListener('click', onPrevPage); //下一頁 function onNextPage() { if (pageNum >= pdfDoc.numPages) { return; } pageNum++; queueRenderPage(pageNum); } document.getElementById('next').addEventListener('click', onNextPage); PDFJS.getDocument(url).then(function(pdfDoc_) { pdfDoc = pdfDoc_; document.getElementById('page_count').textContent = pdfDoc.numPages; renderPage(pageNum); }); $('#nav').on('mousewheel', function(event, delta) { var dir = delta > 0 ? 'Up' : 'Down'; if (dir == 'Up') { alert("向上滾動， www.imiansha.com"); } else { alert("向下滾動"); } return false; }); 需要監聽的事件 鍵盤向下滾動的鍵，滑鼠向下滾動 /*閱讀區域，渲染閱讀文件*/ var getPdfData = function (uri){ uri = $szoa_fileServiceUrl + '/file/preview?file=' + uri; var PDFData = ""; $.ajax({ type:"post", async:false, // mimeType: 'text/pdf;charset=x-user-defined', //檔案伺服器預覽介面地址（10.248.71.211:7001） //url:"https://csfile.szoa.sz.gov.cn/file/preview"+uri, url:uri, success:function(data){ PDFData = data; } }); var rawLength = PDFData.length; //轉換成pdf.js能直接解析的Uint8Array型別,見pdf.js-4068 var arrayBf = new ArrayBuffer(rawLength) var array = new Uint8Array(arrayBf); for(i = 0; i < rawLength; i++) { array[i] = PDFData.charCodeAt(i) & 0xff; } DEFAULT_URL = array; } // $("#attachmentsView").append('<div class="outlineItem"><a href="' + 'http://localhost:8080/pdfjs/web/viewer.html?file='+mdata.pdfList[i].filePath+'">'+mdata.pdfList[i].fileName+'</a></div>'); // $("#attachmentsView").append('<div class="outlineItem"><a href="javascript:getPdfData(\''+mdata.pdfList[i].filePath+'\');">'+mdata.pdfList[i].fileName+'</a></div>'); `create_time` timestamp NOT NULL DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP, `create_user_id` varchar(50) DEFAULT NULL, `last_modify_time` timestamp NOT NULL DEFAULT CURRENT_TIMESTAMP, alter table hc_hotel modify column create_time timestamp NOT NULL DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP; alter table hc_hotel modify column modify_time timestamp NOT NULL DEFAULT CURRENT_TIMESTAMP; timestamp NOT NULL DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP
2、demo2
<html> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> .lightbox{ position: fixed; top: 0px; left: 0px; height: 100%; width: 100%; z-index: 7; opacity: 0.3; display: block; background-color: rgb(0, 0, 0); } .pop{ position: absolute; left: 50%; width: 894px; margin-left: -447px; z-index: 9; } </style> <script src="../build/pdf.js"></script> <script type="text/javascript"> function showPdf() { var container = document.getElementById("container"); container.style.display = "block"; var url = 'compressed.tracemonkey-pldi-09.pdf'; PDFJS.workerSrc = '../build/pdf.worker.js'; PDFJS.getDocument(url).then(function (pdf) { pdf.getPage(2).then(function (page) { var scale = 1; var viewport = page.getViewport(scale); var canvas = document.getElementById('the-canvas'); console.log(canvas); var context = canvas.getContext('2d'); canvas.height = viewport.height; canvas.width = viewport.width; var renderContext = { canvasContext: context, viewport: viewport }; page.render(renderContext); }); }); } </script> </head> <body> <h1><a href="javascript:void(0)" target="_blank" onclick="showPdf()">顯示pdf文件</a></h1> <div id="container" style="display: none;"> <div class="lightbox"></div> <div id="pop" class="pop"> <canvas id="the-canvas"></canvas> </div> </div> </body> </html>