pdf.js在线PDF浏览插件的使用
时间：2020-05-13 22:40:11|栏目：|点击： 次
pdf.js这个插件可以实现在浏览器阅读PDF文件，技术原型主要用于在 HTML5 平台上展示 PDF 文档，无需任何本地技术支持。
Mozilla Firefox的pdf预览也是集成了这个插件。
官网
https://mozilla.github.io/pdf.js/
pdf.js主要包含两个库文件，一个pdf.js和一个pdf.worker.js一个负责API解析，一个负责核心解析。
单页PDF使用示例：
Mozilla Firefox的pdf预览也是集成了这个插件。
官网
https://mozilla.github.io/pdf.js/
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的链接即可
