如何使用PDF.js ?

PDF.js是Mozilla开发的一个JavaScript模块,用于在Web页面显示PDF文件。这个模块的使用体验很好,在这次的软件工程实验里窝和窝的队友也要采用这个模块去进行PDF的显示。

为了方便队友进行开发,窝写了一个Demo。下面就沿着写Demo的过程来简单介绍一下如何使用PDF.js让网页显示PDF文件。

第一步当然是Build这个模块啦

过程如下:

$ git clone git://github.com/mozilla/pdf.js.git
$ cd pdf.js
$ npm install -g gulp-cli
$ npm install

其中,后两步是安装必需组件

然后你需要导出可以供其他项目使用的模块,执行如下命令

$ gulp generic

然后就会在build/generic/build下面生成pdf.js 和 pdf.worker.js。

如果不想手动Build或者网络条件较差,可以去下面下载Build好的版本

pdfjs_build.rar

然后我们把这个build文件夹copy到需要的项目里,例如说像这样……

然后我们编辑HTML文件,例如像图里编辑一个show.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="./build/generic/build/pdf.js"></script>
</head>
<body>
<div id="pdf-container"></div>
<script>
    PDFJS.getDocument('https://arxiv.org/pdf/1704.00028.pdf').then(function(pdf) {
        for (var pageNum = 1; pageNum < pdf.numPages; ++pageNum) {
            pdf.getPage(pageNum).then(function(page) {
                var scale = 1.5;
                var viewport = page.getViewport(1);

                var canvas = document.createElement('canvas');
                var context = canvas.getContext('2d');
                canvas.height = viewport.height;
                canvas.width = viewport.width;

                var renderContext = {
                    canvasContext: context,
                    viewport: viewport
                };
                page.render(renderContext);

                document.getElementById('pdf-container').appendChild(canvas);
            });
        }
    })
</script>
</body>
</html>

然后测试一下

Emmmmmm至少可以显示出来了。

实际上PDF文件地址既可以是一个链接,也可以是本地的一个PDF文件的路径,都可以访问。

大概介绍到这里吧。希望窝队友可以尽快搞定前端。

 

 

 

 

发表评论

电子邮件地址不会被公开。