pdf.js 入门使用指南1-安装篇

最近由于工作需要,需要一个功能在线浏览pdf。经过初步筛选,选定了pdf.js.可以满足我们所有的功能需求。

一:先简要概括一下优缺点
优点总结:

  1. 免费,开源的。这点很重要
  2. 纯js实现,客户不需要安装额外的插件
  3. 功能强大,缩放,打印,查找功能应有尽有
  4. 兼容主流浏览器,火狐,谷歌,ie9+都支持
    缺点总结
    1:js 文件偏大,加载一起3m 多,即便压缩后,两个核心js 文件也在1m左右。会影响加载速度
    2:引文使用H5 技术,ie8 以及ie8 以下的浏览器不支持。

二:下载和安装
1:进入官网下载地址:
http://mozilla.github.io/pdf.js/getting_started/#download
建议下载最新版,目前最新版本为1.9,建议下载正式版
pdfjs,下载

ps:1.8版本以及以上可以兼容,目前的qq浏览器,低版本qq浏览器可能会不能显示。
 官网是国外的,打开可能比较满,也可以从下面的国内镜像站下载
 http://download.csdn.net/download/amu0521/10107388?web=web
  
 2:下载后,解压文件,进入build 目录
  
  
拷贝pdf.js,pdf.worker.js
复制pdf.js 和pdf.worker.js,这两个文件到我们的网站目录

3:编辑文件,显示签名。本步骤非必须。
  打开pdf.worker.js ,搜索 data.fieldType === ‘Sig’ ,定位到大约28728行,注释掉下面的一行代码,如图
  显示签名
  保存即可。
4:编写测试网页,显示pdf

<html>
<head>
    <title>pdf.js展示1,上一页,下一页</title>
</head>
<h1>PDF.js Previous/Next example</h1>

<div>
    <button id="prev">Previous</button>
    <button id="next">Next</button>
    &nbsp; &nbsp;
    <span>Page: <span id="page_num"></span> / <span id="page_count"></span></span>
</div>

<canvas id="the-canvas"></canvas>
<script src="js/pdf.js"></script>
<script src="js/pdf.worker.js"></script>
<script>
    var url = '/pdf/doc/demo1.pdf';

    var pdfDoc = null,
        pageNum = 1,
        pageRendering = false,
        pageNumPending = null,
        scale = 0.8,
        canvas = document.getElementById('the-canvas'),
        ctx = canvas.getContext('2d');

    /**
     * Get page info from document, resize canvas accordingly, and render page.
     * @param num Page number.
     */
    function renderPage(num) {
        pageRendering = true;
        // Using promise to fetch the page
        pdfDoc.getPage(num).then(function(page) {
            var viewport = page.getViewport(scale);
            canvas.height = viewport.height;
            canvas.width = viewport.width;

            // Render PDF page into canvas context
            var renderContext = {
                canvasContext: ctx,
                viewport: viewport
            };
            var renderTask = page.render(renderContext);

            // Wait for rendering to finish
            renderTask.promise.then(function() {
                pageRendering = false;
                if (pageNumPending !== null) {
                    // New page rendering is pending
                    renderPage(pageNumPending);
                    pageNumPending = null;
                }
            });
        });

        // Update page counters
        document.getElementById('page_num').textContent = num;
    }

    /**
     * If another page rendering in progress, waits until the rendering is
     * finised. Otherwise, executes rendering immediately.
     */
    function queueRenderPage(num) {
        if (pageRendering) {
            pageNumPending = num;
        } else {
            renderPage(num);
        }
    }

    /**
     * Displays previous page.
     */
    function onPrevPage() {
        if (pageNum <= 1) {
            return;
        }
        pageNum--;
        queueRenderPage(pageNum);
    }
    document.getElementById('prev').addEventListener('click', onPrevPage);

    /**
     * Displays next page.
     */
    function onNextPage() {
        if (pageNum >= pdfDoc.numPages) {
            return;
        }
        pageNum++;
        queueRenderPage(pageNum);
    }
    document.getElementById('next').addEventListener('click', onNextPage);

    /**
     * Asynchronously downloads PDF.
     */
    PDFJS.getDocument(url).then(function(pdfDoc_) {
        pdfDoc = pdfDoc_;
        document.getElementById('page_count').textContent = pdfDoc.numPages;

        // Initial/first page rendering
        renderPage(pageNum);
    });
</script>
</html>

运行效果如下图
pdf浏览

代码来自官方实例,进行了整理
http://mozilla.github.io/pdf.js/examples/

提示:
1:请运行在虚拟服务器上,比如apache或iis等,否则可能会显示不出来效果。
2:pdf 文件为任何pdf文件即可,网站演示的pdf文件从网上下载的,如果侵权,请留言。
附上demo 目录结构
pdf浏览展示

HTML、CSS和JavaScript是现代网页开发的三大基石。HTML是一种用于构建网页结构的标记语言,通过使用不同的HTML元素和属性,可以将文字、图片、链接等内容展示在网页上。CSS是一种用于设置网页样式的语言,通过使用不同的CSS属性和选择器,可以为网页元素提供不同的样式效果,包括颜色、字体、布局等。JavaScript是一种用于实现网页交互和动态效果的脚本语言,通过使用不同的JavaScript语法和函数,可以进行表单验证、动态内容加载、页面元素操作等。 对于初学者来说,学习HTML、CSS和JavaScript的最佳方式是结合实践和理论。首先,可以从网上或书籍中找到一本编程入门指南PDF,这种资源通常会提供基础知识和实例代码来帮助初学者理解和运用这些语言。在学习过程中,可以分别学习HTML、CSS和JavaScript的基础语法和常用特性,例如HTML标签的用法、CSS选择器的使用和JavaScript函数的编写方法。同时,可以通过模仿和修改实例代码来锻炼自己的编程能力。 此外,建议初学者在学习的过程中,尽量找一些简单的项目来实践。例如,可以尝试创建一个简单的网页,使用HTML来构建页面结构,使用CSS来设置页面样式,使用JavaScript来实现一些简单的交互效果,如点击按钮弹出提示框等。通过实际操作,可以更好地理解和记忆所学的知识。 最重要的是,编程是一个不断学习和实践的过程。只有不断地写代码和解决问题,才能不断提高自己的编程能力。
评论 12
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值