logo头像

学如逆水行舟,不进则退!!!

文章目录

PDF.js 详情解说

本文于417天之前发表,文中内容可能已经过时。

pdf.js资源下载

pdf.js资源下载

点我下载

自定义默认加载的pdf资源

这里写图片描述

  • 在web/view.js中我们可以通过DEFAULT_URL设置默认加载的pdf。通过上面代码我们也可以看出来可以通过后缀名来指定加载的pdf。如:
http://mozilla.github.com/pdf.js/web/viewer.html?file=compressed.tracemonkey-pldi-09.pdf.

这样我们代码获取到file字段就会自动覆盖我们默认的pdf。

加载其他服务器上的pdf(远程加载)

  • 这个功能是可以实现的,但是并不是默认开启的。pdf.js和其他的JavaScript运行机制是一样的。所以无法与request请求交互。但是我们还是可以通过在我们的服务商使用cors或者设置代理向pdf.js提供pdf预览的。

支持的浏览器

这里写图片描述

  • 插件在火狐35版本及以上是不支持的。pdf.js是火狐自19版本的一部分。扩展名是由开发商和主要用于将使用最新版本的pdf.js图书馆一个年长的Firefox版本。用户应该卸载扩展,恢复pdfjs.disabled配置设置和设置选项->应用选择PDF文件的内部浏览器继续查看PDF与pdf.js Firefox。

    如何开始一个pdf.js项目

    首先我们得准备返回值和安装环境。就是pdf.js;其次我们得属性pdf.js内部运行机制;最后提交请求

    给pdf添加注释

    到目前为止,pdf.js还没有提供修改pdf的api,pdf.js主要是让我们能够预览。所以加注释目前无法实现。

    精简版pdf.js

    github上 gulp minified可以下载到精简版

    pdf.js没有正确加载或报错吗

    答案是会报错。这些问题是用来跟踪用户使用状态的。我们可以尝试通过问题追踪到问题根源

    pdf已损坏,pdf.js还会加载吗

    会的,pdf.js会尝试修复并显示pdf文档的

    优化pdf.js

    pdf.js加载速度取决于每页的容量。至于页数并不影响我们的加载速度。下面我可以给大家几点使用pdf.js优化的建议
    1、避免使用高分辨率的图像,150 dpi的分辨率扫描的图像应该足够的屏幕,尤其是低动力装置;
    2、尝试使用JPEG的RGB颜色空间的彩色图像编码照片;
    3、避免使用高性能的效果
    4、避免使用PDF生成器(或不创造内容),产生无效的PDF输出(例如LibreOffice创建一个向量元素/图片不了解小很多的图像)
    5、如果有这样的设置,使用网站优化的PDF输出线性化;
    6、固定或不产生损坏的PDF格式不符合规范的pdf32000

小案列

<li><a href="viewer.html?name=a.pdf" target="pdfContainer" onclick="showPdf(true)">0001_pdf</a></li>
        <li><a href="viewer.html?name=b.pdf" target="pdfContainer" onclick="showPdf(true)">0002_pdf</a></li>
<script type="text/javascript">
        function showPdf(isShow){
            var state = "";
            if(isShow){
                state = "block";
            }else{
                state = "none";
            }
            var pop = document.getElementById("pop");
            pop.style.display = state;
            var lightbox = document.getElementById("lightbox");
            lightbox.style.display = state;
        }
        function close(){
            showPdf(false);
        }
    </script>

遗留问题

  • 研究半天没有解决在html中的pdf.js跨域问题。网上教程都是指出php解决方法、在html上以后有机会再更新!
上一篇
坚持原创技术分享,您的支持将鼓励我继续创作!