700字范文,内容丰富有趣,生活中的好帮手!
700字范文 > pdf.js实现旋转放大缩小

pdf.js实现旋转放大缩小

时间:2022-12-27 22:54:14

相关推荐

pdf.js实现旋转放大缩小

通过设置 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>&nbsp; &nbsp;<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>

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。