html5怎么添加pdf文档,怎么使用pdf.js，html5在浏览器直接打开pdf文档

一时失言乱红尘 2022-10-06 05:54 525阅读 0赞

pdf.js是什么？

pdf.js是一款开源的pdf文档读取解析插件，据说在html5下诞生的，对于主流的浏览器基本都支持。pdf.js框架的魅力所在无需任何本地支持，浏览器支持html5就能支持pdf.js(不过对于低版本的IE，就只能节哀了！)。

pdf.js主要包含两个库文件，一个pdf.js和一个pdf.worker.js，，一个负责API解析，一个负责核心解析。官网GitHub地址如下：https://github.com/mozilla/pdf.js。

pdf.js 使用实例

首先看一个demo：http://mozilla.github.io/pdf.js/web/viewer.html 这个viewer我觉得就是PDF.js的最终UI。

参考代码

1.引入pdf.js，2.解析读取pdf

function showPdf(){

PDFJS.workerSrc = ‘../build/pdf.worker.js’;//加载核心库

PDFJS.getDocument(url).then(function getPdfHelloWorld(pdf) {

pdf.getPage(1).then(function getPageHelloWorld(page) {// 获取第一页数据

var scale = 1.5;

var viewport = page.getViewport(scale);

// Prepare canvas using PDF page dimensions

var canvas = document.getElementById(‘the-canvas’);

var context = canvas.getContext(‘2d’);

canvas.height = viewport.height;

canvas.width = viewport.width;

// Render PDF page into canvas context

var renderContext = {

canvasContext: context,viewport: viewport

};

page.render(renderContext);

});

});

}

3.设置html标签

显示pdf文档

4.通过调用API自己解析，通常，我们直接使用官网的Demo，比如viewer.html，官方已经为我们设置好了预览的皮肤和各种事件，因此，我只需要将官方的库引进去，会进行本地预览即可。

发表评论

表情：
评论列表 （有 0 条评论，525人围观）

还没有评论，来说两句吧...

相关阅读