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>

pdf.js实现旋转放大缩小相关推荐

前端vue项目(使用pdf.js) pdf展示及pdf工具栏放大缩小功能实现
前端vue项目(使用pdf.js) pdf展示及pdf工具栏放大缩小功能实现 1.vue项目pdf展示 2.pdf工具栏放大缩小功能文章目录前端vue项目(使用pdf.js) pdf展示及pdf工 ...
js 直接打开选择文件窗口_基于HTML5 构建的 Web端现代化PDF在线预览插件——PDF.js...
引言 PDF文件现在在许多企业中常用 - 无论您是要生成销售报告,交付合同还是发送发票,PDF都是首选的文件类型.PDF.js是由Mozilla编写的JavaScript库.由于它使用vanilla ...
pdfh5.js 基于pdf.js和jQuery，web/h5/移动端PDF预览手势缩放插件。
pdfh5.js 基于pdf.js和jQuery,web/h5/移动端PDF预览手势缩放插件. 注意:本地绝对路径地址不能加载,跨域问题用代理或者服务端解决. svg模式渲染存在缺陷,只能渲染普通pd ...
手机端html5展示pdf,pdf.js移动端展示预览打开pdf-pdfh5.js
pdf.js移动端展示预览打开pdf-pdfh5.js 本插件基于pdf.js和jQuery,可手势捏合缩放,支持懒加载(即分段加载). 2019.07.18更新:增加npm install pdfh ...
js转换html为pdf文件怎么打开方式,pdf.js实现在HTML下直接浏览pdf文档，无需插件即可实现...
pdf.js是一款开源的pdf文档读取解析插件,据说在HTML5下诞生的,对于主流的浏览器基本都支持. 官网GitHub地址如下:https://github.com/mozilla/pdf.js 由 ...
使用pdf.js预览实现读取服务器外部文件
不知道大家使用百度网盘的文件预览功能,f12看过控制台没有. 发现百度网盘使用的预览文件功能全是基于开源pdf .js的接下来正题,我们在使用pdf.js默认是读取发布容器内部的文件,读取外部的文件 ...
pdf.js 使用实例
pdf.js可以实现在html下直接浏览pdf文档,是一款开源的pdf文档读取解析插件 pdf.js主要包含两个库文件,一个pdf.js和一个pdf.worker.js,,一个负责API解析,一个负责 ...
pdf.js 在线阅读PDF
在网上找了一下如何在线显示pdf文件.个人还是觉得这个是比较不错的,这里做一个记录. gitHub:https://github.com/mozilla/pdf.js 这是一个开源 ...
html文档中的元数据,javascript – 如何使用pdf.js从pdf文档中获取元数据
仅使用没有第三方查看器的PDF.js库,您可以使用promises获取这样的元数据. PDFJS.getDocument(url).then(function (pdfDoc_) { pdfDoc = ...

pdf.js实现旋转放大缩小

pdf.js实现旋转放大缩小相关推荐

最新文章

热门文章