zoukankan      html  css  js  c++  java
  • 在web项目中集成pdf.js的默认查看器

    pdf.jsMozilla开源的一项用于在HTML5平台上显示pdf文档的技术,Mozilla自己的Firefox浏览器也用了pdf.js来预览pdf,可见应该是一个比较成熟稳定的方案(btw,chrome用的是foxit的技术,国人骄傲啊)。当然类似的方案有很多,并且大多都提供了丰富的api,如果你仔细读文档/api,可能会有好的收获,但是Mozilla同时把在Firefox内的查看器也一道开源了,对于大部分定制性不强,只需要浏览的使用场景来说,似乎可以直接“拿来主义”,本文就说的是如何直接使用这个自带的viewer

    前提,既然是基于HTML5的方案,那么浏览器兼容性是个大问题,官方尽可能地做了兼容(通过compatibility.js文件),但是仍然无法支持IE9以下的浏览器,详见此,IE9以下要支持,要么换方案,要么直接在不支持的情况下显示下载链接吧。

    1,下载源码

    git clone https://github.com/mozilla/pdf.js.git pdfjs
    cd pdfjs
    

    2, 编译

    需要node环境

    node make generic
    

    这会在你的根目录下生成一个build文件夹,目录结构:

    /
        generic
            build
                pdf.js
                pdf.worker.js
            web
                ...
    

    其中,build路径下是主程序,web路径下是查看器程序

    3, 运行网站

    node make server
    

    你也可以用发布在自己的任意web服务器,用上述命令可以以当前目录pdfjs为根目录伺服一个网站,你可以顺便查看下examples里面的内容,以及web(这就是Mozilla的pdf查看器所在)里面的内容。

    当然,你也可以直接跑到上一节生成的generic目录下伺服一个网站,这会让事情显得简单很多。总之,网站部署好后,我们只要找到web路径下的view.html静态文件,然后传入file=xxx.pdf形式的参数即可,比如:

    http://myapp.mycompany.com/web/viewer.html?file=http://myapp.mycompany.com/my-PDF-file.pdf
    

    (同站文件用相对路径当然也没问题)

    4, 修改部署路径

    如果你的项目部署并不是generic/build&web(肯定大多数不是),你只需要更改·文件里面的pdf.js路径为你的真实路径,

    <script type="text/javascript" src="../build/pdf.js"></script>
    

    以及·里面的‘pdf.worker.js’为你的真实路径即可

    PDFJS.workerSrc = '../build/pdf.worker.js';
    

    参考:Integrating PDF.js as PDF viewer in your web application

  • 相关阅读:
    HDU 2089 不要62
    HDU 5038 Grade(分级)
    FZU 2105 Digits Count(位数计算)
    FZU 2218 Simple String Problem(简单字符串问题)
    FZU 2221 RunningMan(跑男)
    FZU 2216 The Longest Straight(最长直道)
    FZU 2212 Super Mobile Charger(超级充电宝)
    FZU 2219 StarCraft(星际争霸)
    FZU 2213 Common Tangents(公切线)
    FZU 2215 Simple Polynomial Problem(简单多项式问题)
  • 原文地址:https://www.cnblogs.com/walkerwang/p/3757705.html
Copyright © 2011-2022 走看看