上文说的展示pdf我们所用的网页自带的网页viewer.html这个网页是谷歌做的使用pdf.js的一个demo,如果我们自己要使用pdf.js自定义渲染我们的固定页怎么做呢?我们来开始码代码。
首先我们创建一个基础的html模版
<!DOCTYPE html>
<html>
<head>
<title>自定义渲染pdf页demo</title>
</head>
<body>
</body>
</html>
然后呢 pdfjs他是怎样解析的我们不需要管他, 那么他是怎样显示的呢?实际上他是利用了html的canvas画布,把pdf内容绘制上面的那么我们需要一个canvas.
<!DOCTYPE html>
<html>
<head>
<title>自定义渲染pdf页demo</title>
</head>
<body>
<canvas id="canvas"></canvas>
</body>
</html>
我们要显示pdf 当然需要pdfjs pdf.worker.js 和pdf文件这里面我们之间用他官网的
<!DOCTYPE html>
<html>
<head>
<title>自定义渲染pdf页demo</title>
</head>
<body>
<canvas id="canvas"></canvas>
<script src="https://mozilla.github.io/pdf.js/build/pdf.js"></script>
<script>
var pdfjsLib = window['pdfjs-dist/build/pdf'];
var pdfurl = 'https://mozilla.github.io/pdf.js/web/compressed.tracemonkey-pldi-09.pdf';
pdfjsLib.GlobalWorkerOptions.workerSrc = 'https://mozilla.github.io/pdf.js/build/pdf.worker.js';
</script>
</body>
</html>
然后就是我们解析pdf文件了首先拿到pdf
<!DOCTYPE html>
<html>
<head>
<title>自定义渲染pdf页demo</title>
</head>
<body>
<canvas id="canvas"></canvas>
<script src="https://mozilla.github.io/pdf.js/build/pdf.js"></script>
<script>
var pdfjsLib = window['pdfjs-dist/build/pdf'];
var pdfurl = 'https://mozilla.github.io/pdf.js/web/compressed.tracemonkey-pldi-09.pdf';
pdfjsLib.GlobalWorkerOptions.workerSrc = 'https://mozilla.github.io/pdf.js/build/pdf.worker.js';
//异步下载pdf
var loadingTask = pdfjsLib.getDocument(pdfurl);
//加载pdf
loadingTask.promise.then(function(pdf) {
}, function(reason){
//pdf加载错误 原因有很多 比如文件错误这种的话属于不可解决问题 比如pdf有密码 这种就可以在这里处理
console.log('loading error')
//pdfjs 自己编辑的错误码
console.error(reason);
})
</script>
</body>
</html>
然后我们开始解析pdf对应页面 代码如下
<!DOCTYPE html>
<html>
<head>
<title>自定义渲染pdf页demo</title>
</head>
<body>
<canvas id="canvas"></canvas>
<script src="https://mozilla.github.io/pdf.js/build/pdf.js"></script>
<script>
var pdfjsLib = window['pdfjs-dist/build/pdf'];
var pdfurl = 'https://mozilla.github.io/pdf.js/web/compressed.tracemonkey-pldi-09.pdf';
pdfjsLib.GlobalWorkerOptions.workerSrc = 'https://mozilla.github.io/pdf.js/build/pdf.worker.js';
//异步下载pdf
var loadingTask = pdfjsLib.getDocument(pdfurl);
//加载pdf
loadingTask.promise.then(function(pdf) {
console.log('PDF loaded');
//这里定义的pdf页面 我们选择的是第一页
var pageNumber = 1;
//这里面来调用getPage方法获取对应的页面
pdf.getPage(pageNumber).then(function(page) {
//这个是倍数
var scale = 1.5;
//这个是展示的倍数viewer.html的倍数就是改的这个东西
var viewport = page.getViewport({scale: scale});
//这里面开始真的的绘制 获取canvas id这里面我定义的就叫canvas
var canvas = document.getElementById('canvas');
//这里面获得一个画笔
var context = canvas.getContext('2d');
//这里面定义canvas的宽高
canvas.height = viewport.height;
canvas.width = viewport.width;
var renderContext = {
canvasContext: context,
viewport: viewport
};
//真正的渲染
var renderTask = page.render(renderContext);
renderTask.promise.then(function () {
console.log('渲染完毕');
});
});
}, function(reason){
//pdf加载错误 原因有很多 比如文件错误这种的话属于不可解决问题 比如pdf有密码 这种就可以在这里处理
console.log('loading error')
//pdfjs 自己编辑的错误码
console.error(reason);
})
</script>
</body>
</html>
最后我们打开我们写的html
pdf第一页就完美渲染了。
好的今天就到这。基础交流群 799827663