1.进入： http://mozilla.github.io/pdf.js/
download --> stable(下载稳定版)
2.解压文件，web里边是一些实例，用不到，主要是build下的 pdf.js 文件
3.引入pdf.js
翻页：
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
<script src="./jquery-3.4.1.min.js" charset="utf-8"></script>
<script src="./build/pdf.js" charset="utf-8"></script>
</head>
<body style="background:#404040">
<div>
<button id="prev">上一页</button>
<button id="next">下一页</button>
<span>Page: <span id="page_num"></span> / <span id="page_count"></span></span>
</div>
<div style="width:100%;height:100%;background:#404040">
<div style=" width:1000px;margin: 0 auto;">
<canvas id="the-canvas"></canvas>
</div>
</div>
</body>
<script type="text/javascript">
$(function() {
var PDFJS = window.pdfjsLib;
var url = '.pdf'; //你要显示的pdf文件
PDFJS.workerSrc = './build/pdf.worker.js';
var pdfDoc = null,
pageNum = 1,
pageRendering = false,
pageNumPending = null,
scale = 1,
canvas = document.getElementById('the-canvas'),
ctx = canvas.getContext('2d');
function renderPage(num) {
pageRendering = true;
pdfDoc.getPage(num).then(function(page) {
var viewport = page.getViewport(1);
var desiredWidth = "1000";
var scale = desiredWidth / viewport.width;
var scaledViewport = page.getViewport(scale);
canvas.height = scaledViewport.height;
canvas.width = scaledViewport.width;
var renderContext = {
canvasContext: ctx,
viewport: scaledViewport
};
var renderTask = page.render(renderContext);
renderTask.promise.then(function() {
pageRendering = false;
if (pageNumPending !== null) {
renderPage(pageNumPending);
pageNumPending = null;
}
});
});
//显示总页数
document.getElementById('page_num').textContent = pageNum;
}
//翻页方法
function queueRenderPage(num) {
if (pageRendering) {
pageNumPending = num;
} else {
renderPage(num);
}
}
function onPrevPage() {
if (pageNum <= 1) {
return;
}
pageNum--;
queueRenderPage(pageNum);
}
//上一页监听
document.getElementById('prev').addEventListener('click', onPrevPage);
function onNextPage() {
if (pageNum >= pdfDoc.numPages) {
return;
}
pageNum++;
queueRenderPage(pageNum);
}
//下一页监听
document.getElementById('next').addEventListener('click', onNextPage);
PDFJS.getDocument(url).then(function(pdfDoc_) {
pdfDoc = pdfDoc_;
console.log(pdfDoc)
document.getElementById('page_count').textContent = pdfDoc.numPages;
renderPage(pageNum)
})
})
</script>
</html>
不翻页：
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
<script src="./jquery-3.4.1.min.js" charset="utf-8"></script>
<script src="./build/pdf.js" charset="utf-8"></script>
</head>
<body style="background:#404040">
<div style="width:100%;height:100%;background:#404040">
<div class="addCanvas" style=" width:1000px;margin: 0 auto;"></div>
</div>
</body>
<script type="text/javascript">
$(function() {
pcfJs();
})
function pcfJs(){
let PDFJS = window.pdfjsLib;
let url = '.pdf'; //你的pdf文件路径
PDFJS.workerSrc = './build/pdf.worker.js';
let pdfDoc = null,
pageNum = 1,
pageNumPending = null,
scale = 1;
function renderPage(num) {
$('.addCanvas').append('<canvas id="the-canvas'+num+'"></canvas>')
let canvas = document.getElementById('the-canvas'+num),ctx = canvas.getContext('2d');
pdfDoc.getPage(num).then(function(page) {
let viewport = page.getViewport(1);
let desiredWidth = "1000";
let scale = desiredWidth / viewport.width;
let scaledViewport = page.getViewport(scale);
canvas.height = scaledViewport.height;
canvas.width = scaledViewport.width;
//进行文件读取加载
let renderContext = {
canvasContext: ctx,
viewport: scaledViewport
};
let renderTask = page.render(renderContext);
});
}
PDFJS.getDocument(url).then(function(pdfDoc_) {
pdfDoc = pdfDoc_;
for(let i = 1;i<= pdfDoc.numPages;i++){
renderPage(i)
}
})
}
</script>
</html>
demo地址： https://gitee.com/zhao12/demo.git （pdf.js文件夹，两种效果）
网友评论