pdf.js 使用
介绍
pdf.js 是一款开源的 pdf 文档解析插件,可以在 HTML 中查看 PDF 文件。
创建 HTML 且添加引用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>pdf.js Demo</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.0.943/pdf.min.js"></script>
</head>
<body>
</body>
</html>
❓ HTML 页面设计
https://code.tutsplus.com/tutorials/how-to-create-a-pdf-viewer-in-javascript--cms-32505
创建一个 DIV 容器,用来放置 PDF 查看器:
<div id="my_pdf_viewer">
</div>
JavaScript PDF 查看器的核心是 HTML5
<div id="canvas_container">
<canvas id="pdf_renderer"></canvas>
</div>
添加页面控制按钮,可以往前后翻页,还可以跳转到指定页面
<div id="navigation_controls">
<button id="go_previous">Previous</button>
<input id="current_page" value="1" type="number"/>
<button id="go_next">Next</button>
</div>
添加放大缩小显示按钮
<div id="zoom_controls">
<button id="zoom_in">+</button>
<button id="zoom_out">-</button>
</div>
最后显示一个完整的 HTML 页面:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>pdf.js Demo</title>
</head>
<body>
<div id="my_pdf_viewer">
<div id="canvas_container">
<canvas id="pdf_renderer"></canvas>
</div>
<div id="navigation_controls">
<button id="go_previous">Previous</button>
<input id="current_page" value="1" type="number"/>
<button id="go_next">Next</button>
</div>
<div id="zoom_controls">
<button id="zoom_in">+</button>
<button id="zoom_out">-</button>
</div>
</div>
</body>
</html>
添加 pdf.js 引用
pdf.js CDN 地址
- cdnjs:
https://cdnjs.com/libraries/pdf.js
- jsdelivr: https://www.jsdelivr.com/package/npm/pdfjs-dist
我们在以上 HTML 页面中将它引入进来:
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.0.943/pdf.min.js"></script>
加载 PDF 文件
初始化,在当前项目根目录放置一个 PDF 文件:test.pdf
<script>
var myState = {
pdf: null,
currentPage: 1,
zoom: 1
}
pdfjsLib.getDocument('./test.pdf').then((pdf) => {
myState.pdf = pdf;
render();
});
</script>
这里有一个 render
渲染页面的函数:
function render() {
myState.pdf.getPage(myState.currentPage).then((page) => {
var canvas = document.getElementById("pdf_renderer");
var ctx = canvas.getContext('2d');
var viewport = page.getViewport(myState.zoom);
canvas.width = viewport.width;
canvas.height = viewport.height;
page.render({
canvasContext: ctx,
viewport: viewport
});
});
}
这样一个完整的页面就是:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>pdf.js Demo</title>
<script
src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.0.943/pdf.min.js">
</script>
</head>
<body>
<div id="my_pdf_viewer">
<div id="canvas_container">
<canvas id="pdf_renderer"></canvas>
</div>
<div id="navigation_controls">
<button id="go_previous">Previous</button>
<input id="current_page" value="1" type="number"/>
<button id="go_next">Next</button>
</div>
<div id="zoom_controls">
<button id="zoom_in">+</button>
<button id="zoom_out">-</button>
</div>
</div>
<script>
var myState = {
pdf: null,
currentPage: 1,
zoom: 1
}
pdfjsLib.getDocument('./test.pdf').then((pdf) => {
myState.pdf = pdf;
render();
});
function render() {
myState.pdf.getPage(myState.currentPage).then((page) => {
var canvas = document.getElementById("pdf_renderer");
var ctx = canvas.getContext('2d');
var viewport = page.getViewport(myState.zoom);
canvas.width = viewport.width;
canvas.height = viewport.height;
page.render({
canvasContext: ctx,
viewport: viewport
});
});
}
</script>
</body>
</html>
安装 Anywhere
静态文件服务器:
npm install anywhere -g
安装完成后在当前项目目录执行 anywhere
即可启动服务,显示出 PDF 页面。
可以完善下样式:
#canvas_container{
width: 800px;
height: 450px;
overflow: auto;
background: #333;
text-align: center;
border: solid 3px;
}
操控事件
← 前一页:
document.getElementById('go_previous')
.addEventListener('click', (e) => {
if(myState.pdf == null|| myState.currentPage == 1)
return;
myState.currentPage -= 1;
document.getElementById("current_page").value = myState.currentPage;
render();
});
→ 后一页:
document.getElementById('go_next')
.addEventListener('click', (e) => {
if(myState.pdf == null || myState.currentPage > myState.pdf._pdfInfo.numPages)
return;
myState.currentPage += 1;
document.getElementById("current_page").value = myState.currentPage;
render();
});
↪ 页面跳转:
document.getElementById('current_page')
.addEventListener('keypress', (e) => {
if(myState.pdf == null) return;
// Get key code
var code = (e.keyCode ? e.keyCode : e.which);
// If key code matches that of the Enter key
if(code == 13) {
var desiredPage = document.getElementById('current_page').valueAsNumber;
if(desiredPage >= 1 && desiredPage <= myState.pdf._pdfInfo.numPages) {
myState.currentPage = desiredPage;
document.getElementById("current_page").value = desiredPage;
render();
}
}
});
🔍 放大:
document.getElementById('zoom_in')
.addEventListener('click', (e) => {
if(myState.pdf == null) return;
myState.zoom += 0.5;
render();
});
🔍 缩小:
document.getElementById('zoom_out')
.addEventListener('click', (e) => {
if(myState.pdf == null) return;
myState.zoom -= 0.5;
render();
});
最终完成的 HTML 页面:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>pdf.js Demo</title>
<style>
#canvas_container{
width: 800px;
height: 450px;
overflow: auto;
background: #333;
text-align: center;
border: solid 3px;
}
</style>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.0.943/pdf.min.js"></script>
</head>
<body>
<div id="my_pdf_viewer">
<div id="canvas_container">
<canvas id="pdf_renderer"></canvas>
</div>
<div id="navigation_controls">
<button id="go_previous">Previous</button>
<input id="current_page" value="1" type="number" style='width:80px'/>
<button id="go_next">Next</button>
</div>
<div id="zoom_controls">
<button id="zoom_in">+</button>
<button id="zoom_out">-</button>
</div>
</div>
<script>
var myState = {
pdf: null,
currentPage: 1,
zoom: 1
}
pdfjsLib.getDocument('./test.pdf').then((pdf) => {
myState.pdf = pdf;
render();
});
//#region Event
document.getElementById('go_previous').addEventListener('click',(e)=>{
if(myState.pdf==null || myState.currentPage==1)
return;
myState.currentPage-=1;
document.getElementById('current_page').value=myState.currentPage;
render();
})
document.getElementById('go_next').addEventListener('click',(e)=>{
if(myState.pdf==null || myState.currentPage>myState.pdf._pdfInfo.numPages)
return;
myState.currentPage+=1;
document.getElementById('current_page').value=myState.currentPage;
render();
})
document.getElementById('current_page').addEventListener('keypress',(e)=>{
if(myState.pdf==null)return;
var code=(e.keyCode?e.keyCode:e.which);
if(code==13){
var desiredPage=document.getElementById('current_page').valueAsNumber;
if(desiredPage>=1 && desiredPage<=myState.pdf._pdfInfo.numPages){
myState.currentPage=desiredPage;
render();
}
}
})
document.getElementById('zoom_in').addEventListener('click',(e)=>{
if(myState.pdf==null || myState.zoom>=3)return;
myState.zoom+=0.5;
render();
})
document.getElementById('zoom_out').addEventListener('click',(e)=>{
if(myState.pdf==null || myState.zoom<=0.5)return;
myState.zoom-=0.5;
render();
})
//#endregion
function render() {
myState.pdf.getPage(myState.currentPage).then((page) => {
var canvas = document.getElementById("pdf_renderer");
var ctx = canvas.getContext('2d');
var viewport = page.getViewport(myState.zoom);
canvas.width = viewport.width;
canvas.height = viewport.height;
page.render({
canvasContext: ctx,
viewport: viewport
});
});
}
</script>
</body>
</html>