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开发，网站建设知名品牌，全国接单，为企业构建强有力的营销平台。
转载请注明来源网址：青锋建站-http://www.sjzphp.com/webdis/pdfview_1069.html
