pdf预览 pdf.js+pdfObject

最新推荐文章于 2024-10-10 08:17:38 发布

Skyline_ding

最新推荐文章于 2024-10-10 08:17:38 发布

阅读量470

点赞数

分类专栏： web vue 文章标签： pdf预览

本文链接：https://blog.csdn.net/Skyline_ding/article/details/99847183

版权

vue 同时被 2 个专栏收录

3 篇文章 0 订阅

订阅专栏

web

1 篇文章 0 订阅

订阅专栏

1.下载pdf.js

第一步，下载源码：git clone git://github.com/mozilla/pdf.js.git （直接github下载zip 不能直接使用）

第二步，cd pdf.js

第三步，安装node.js

https://nodejs.org/en/download/

第四步，安装gulp

npm install -g gulp-cli

第五步，安装pdf.js的依赖库

npm install

第六步，启动本地web服务，因为有的浏览器不允许用file://协议打开pdf文件

gulp server

第七步，构建PDF.js

gulp generic

将在/build/generic / build /目录中生成pdf.js和pdf.worker.js。这两个脚本都是必需的，但是只有pdf.js需要被包含，因为pdf.worker.js将由pdf.js加载。如下图

2.将generic 文件拷到项目中，拷贝需要的，因为它很大

3.下载pdfObject.js

https://github.com/pipwerks/PDFObject/

4.在html 中引用pdf.js和pdfObject.js

  <div class="pdf_content" id="pdf_content"></div>

 <script src="/js/pdfobject.js" ></script>
 <script src="/generic/build/pdf.js" ></script>  
 <script type="text/javascript">
   var  options= {
        forcePDFJS: true,
        PDFJS_URL: "/generic/web/viewer.html"
    };
    if(PDFObject.supportsPDFs){
        PDFObject.embed("写你pdf的地址", "#pdf_content",options);
    } else {
        $.modal.alertError("浏览器不支持预览!");
        console.log("Boo, inline PDFs are not supported by this browser");
    }
 </script>

ps:1.在单独只运用pdfObject.js时，文件预览时偶尔会遇到预览文件名不对应，但文件内容是正确的。也没有找到单独禁用预览文件名的方法。所以与pdf一起结合使用。

2.如果是在vue中，注意要把generic文件拷贝到static目录下。