通过设置 getViewport 函数的scale 参数,可以设置控制放大和缩小比例
1:函数定义
通过查看源码,这个函数有两个参数
1.1 :scale 小数型,1.0 表示100%,0.5 ,表示缩放50%
1.2 roate ,旋转
1.2 代码测试,page.getViewport(0.8),显示如下图所示
1.3 代码测试,page.getViewport(1.3)显示如下图所示,130% 显示
1.4 旋转90度,放大1.5倍 page.getViewport(1.5,90)
1.5 应为代码比较简单,其他不再做解释了,放出完整的测试代码
<html><head><title>pdf.js缩放</title><meta http-equiv="content-type" content="text/html;charset=utf-8"></head><h1>pdf展示</h1><div><button id="prev">Previous</button><button id="next">Next</button><button id="enlarge">放大</button><button id="letting">缩小</button> <span>Page: <span id="page_num"></span> / <span id="page_count"></span></span></div><canvas id="the-canvas"></canvas><script src="js/pdf.js"></script><script src="js/pdf.worker.js"></script><script>var url = 'doc/demo1.pdf';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.*/function renderPage(num) {pageRendering = true;// Using promise to fetch the pagepdfDoc.getPage(num).then(function(page) {var viewport = page.getViewport(scale);canvas.height = viewport.height;canvas.width = viewport.width;// Render PDF page into canvas contextvar renderContext = {canvasContext: ctx,viewport: viewport};var renderTask = page.render(renderContext);// Wait for rendering to finishrenderTask.promise.then(function() {pageRendering = false;if (pageNumPending !== null) {// New page rendering is pendingrenderPage(pageNumPending);pageNumPending = null;}});});// Update page countersdocument.getElementById('page_num').textContent = num;}/*** If another page rendering in progress, waits until the rendering is* finised. Otherwise, executes rendering immediately.*/function queueRenderPage(num) {if (pageRendering) {pageNumPending = num;} else {renderPage(num);}}/*** Displays previous page.*/function onPrevPage() {if (pageNum <= 1) {return;}pageNum--;queueRenderPage(pageNum);}document.getElementById('prev').addEventListener('click', onPrevPage);//放大document.getElementById('enlarge').addEventListener('click', function(){scale += 0.1;queueRenderPage(pageNum);});//缩小document.getElementById('letting').addEventListener('click', function(){scale -= 0.1;queueRenderPage(pageNum);});/*** Displays next page.*/function onNextPage() {if (pageNum >= pdfDoc.numPages) {return;}pageNum++;queueRenderPage(pageNum);}document.getElementById('next').addEventListener('click', onNextPage);/*** Asynchronously downloads PDF.*/PDFJS.getDocument(url).then(function(pdfDoc_) {pdfDoc = pdfDoc_;document.getElementById('page_count').textContent = pdfDoc.numPages;// Initial/first page renderingrenderPage(pageNum);});</script></html>