pdf.js布署配置举例说明与演示

发布时间:2019-06-29 23:15:35 来源:青锋建站 作者:青锋建网站

  PDF.js在很大程度上依赖于Promises的使用。如果你对promises来说是新手,建议你在继续之前熟悉它们。青锋建站给大家分享如何如果在网站中在线浏览pdf文件,将PDF.js用作Web浏览器中的库,pdf.js的布署与配置过程。示例/提供了更多的示例,包括Node.js中的用法(位于示例/节点/)。

获得PDF源文件

  PDF.js的对象结构松散地遵循实际PDF的结构。在顶层有一个文档对象。可以从文档中获取更多信息和各个页面。通过以下API可以获得文件并显示出来:
pdfjsLib.getDocument('helloworld.pdf')
请记住,PDF.js使用promises,上面将返回一个PDFDocumentLoadingTask实例,该实例具有一个promise属性,该属性是通过文档对象解析的。
var loadingTask = pdfjsLib.getDocument('helloworld.pdf');
loadingTask.promise.then(function(pdf) {
  // you can now use *pdf* here
});

PDF.js设置页面

既然我们有了文档,我们就可以得到一页了。同样,这也使用了promises。
pdf.getPage(1).then(function(page) {
  // you can now use *page* here
});

PDF.js渲染页面

  每个PDF页面都有自己的视口,它定义了以像素(72 Dpi)和初始旋转为单位的大小。默认情况下,视口被缩放到PDF的原始大小,但是可以通过修改viewport来改变它。在创建视图端口时,还将创建一个初始转换矩阵,该矩阵将考虑到所需的缩放、旋转,并转换坐标系(PDF中的0,0点记录了左下角,而画布0,0是左上角)。
var scale = 1.5;
var viewport = page.getViewport({ scale: scale, });
var canvas = document.getElementById('the-canvas');
var context = canvas.getContext('2d');
canvas.height = viewport.height;
canvas.width = viewport.width;
var renderContext = {
  canvasContext: context,
  viewport: viewport
};
page.render(renderContext);
或者,如果希望画布呈现到某个像素大小,则可以执行以下操作:
var desiredWidth = 100;
var viewport = page.getViewport({ scale: 1, });
var scale = desiredWidth / viewport.width;
var scaledViewport = page.getViewport({ scale: scale, });

PDF.js交互示例

HelloWorld与文档加载错误处理
该示例演示如何使用承诺来处理加载期间的错误。它还演示了如何等待页面加载和呈现。
使用Base 64编码PDF的HelloWorld
PDF.js可以接受任何解码后的base 64数据作为数组。
Previous/Next example
不能使用相同的画布同时绘制两个页面-该示例演示了如何等待上一次操作完成。
  以上就是青锋建站给大家分享的pdf.js的布署配置举例详解。青锋建站,提供专业的高品质网站制作服务,包括网站建设,SEO,网络营销,PHP开发,网站建设知名品牌,全国接单,为企业构建强有力的营销平台。
 

分享到:

Copyright © 2016-2026 青锋建站 版权所有