这个插件可以实现在浏览器阅读PDF文件,技术原型主要用于在 HTML5 平台上展示 PDF 文档,无需任何本地技术支持。
好像也是Mozilla Firefox的插件
pdf.js主要包含两个库文件,一个pdf.js和一个pdf.worker.js一个负责API解析,一个负责核心解析。
单页PDF使用示例:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="build/pdf.js"></script> // 导入pdf.js
<script>
function showPdf() {
PDFJS.workerSrc = 'build/pdf.worker.js'; //加载核心库
PDFJS.getDocument("web/09.pdf").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);
});
});
}
</script>
</head>
<body>
<a href="javascript:void(0)" target="_blank" onclick="showPdf()">显示pdf文档</a>
<canvas id="the-canvas"></canvas>
</body>
</html>
插件结构:
效果:
加入缩放等其他完整版功能:
直接在viewer.js修改pdf的链接即可