Simple Example of PDF.js
工作上遇到需要在浏览器展示PDF文件,于是找到了Mozilla开发的PDF.js。玩了一下,结论是,直接使用其自带的示例是简单的方法。
PDF.js的官网:https://mozilla.github.io/pdf.js/
github项目页面:https://github.com/mozilla/pdf.js
主要是没找到有用的开发文档,而自己也不会Node.js的开发。所以尝试自己写的页面,只能利用HTML 5的canvas展示PDF内容。官方自带的示例,会把PDF转换成HTML,并且有显示目录、缩略图、打印、等各种实用的功能,媲美很多完整的PDF阅读软件。
这里记下写过的页面,可以翻页、放大缩小:
<h4>显示PDF</h4>
<p>
<button id="prePage">上一页</button> <input type="text" id="curPage" value="" readonly /> <button id="nextPage">下一页</button>
<br />
<button id="zoomIn">+</button> <input type="text" id="zoomScale" value="1" readonly /> <button id="zoomOut">-</button>
</p>
<p>
<canvas id="the-canvas" style="border: 1px solid black; direction: ltr;"></canvas>
</p>
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script src="/js/pdfjs/pdf.js"></script>
<script>
//加载PDF按钮
pdfjsLib.GlobalWorkerOptions.workerSrc = '/js/pdfjs/pdf.worker.js';//自己的路径
var loadingTask = pdfjsLib.getDocument('/pdfjs/docker.pdf');
var pdfDoc = null;
var totalpage = 0;
var curPage = $("#curPage");
var zoomScale = $("#zoomScale");
loadingTask.promise.then(function (pdf) {
//加载指定界面(第一页)
pdfDoc = pdf;
totalpage = pdfDoc.numPages;
getPage(1);
});
function getPage(pageNum) {
if(pageNum < 1) {
pageNum = 1;
} else if(pageNum > totalpage) {
pageNum = totalpage;
}
setCurPageNum(pageNum);
pdfDoc.getPage(pageNum).then(function (page) {
//var scale = 1;
var viewport = page.getViewport({ scale: getZoomScale() });
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);
});
}
function makeThumb(page) {
// draw page to fit into 96x96 canvas
var vp = page.getViewport(1);
var canvas = document.createElement("canvas");
canvas.width = canvas.height = 96;
var scale = Math.min(canvas.width / vp.width, canvas.height / vp.height);
return page.render({canvasContext: canvas.getContext("2d"), viewport: page.getViewport(scale)}).promise.then(function () {
return canvas;
});
}
function loadThumb() {
var pages = []; while (pages.length < pdfDoc.numPages) pages.push(pages.length + 1);
return Promise.all(pages.map(function (num) {
// create a div for each page and build a small canvas for it
var div = document.createElement("div");
document.body.appendChild(div);
return pdfDoc.getPage(num).then(makeThumb).then(function (canvas) {
div.appendChild(canvas);
});
}));
}
function getCurPageNum() {
return parseInt(curPage.val());
}
function setCurPageNum(pageNum) {
return curPage.val(pageNum);
}
function getZoomScale() {
return parseFloat(zoomScale.val());
}
function setZoomScale(scale) {
return zoomScale.val(scale);
}
$("#prePage").click(function(){
var pageNum = getCurPageNum() - 1;
getPage(pageNum);
})
$("#nextPage").click(function(){
var pageNum = getCurPageNum() + 1;
getPage(pageNum);
})
$("#zoomIn").click(function(){
var scale = getZoomScale();
scale = Math.round((scale + 0.2) * 100) / 100;
scale > 2 && (scale = 2);
setZoomScale(scale);
getPage(getCurPageNum());
})
$("#zoomOut").click(function(){
var scale = getZoomScale();
scale = Math.round((scale - 0.2) * 100) / 100;
scale < 0.6 && (scale = 0.6);
setZoomScale(scale);
getPage(getCurPageNum());
})
</script>