pdfjs 基础使用教程（二）

最新推荐文章于 2024-04-13 14:06:32 发布

WellStar520

最新推荐文章于 2024-04-13 14:06:32 发布

阅读量1.6k

点赞数 4

分类专栏： pdf.js 文章标签： html html5 javascript

本文链接：https://blog.csdn.net/e78com5959ws77/article/details/120572941

版权

pdf.js 专栏收录该内容

8 篇文章 1 订阅

订阅专栏

上文说的展示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

WellStar520

关注

4
点赞
踩
7

收藏

觉得还不错? 一键收藏
0
评论
pdfjs 基础使用教程（二）

上文说的展示pdf我们所用的网页自带的网页viewer.html这个网页是谷歌做的使用pdf.js的一个demo，如果我们自己要使用pdf.js自定义渲染我们的固定页怎么做呢？我们来开始码代码。首先我们创建一个基础的html模版<!DOCTYPE html><html> <head> <title>自定义渲染pdf页demo</title> </head> <body>
复制链接

扫一扫