pdf预览 pdf.js+pdfObject

秒速五厘米 2021-10-19 09:48 534阅读 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/][node.js]

第四步 ，安装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加载。如下图

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1NreWxpbmVfZGluZw_size_16_color_FFFFFF_t_70][]

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

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1NreWxpbmVfZGluZw_size_16_color_FFFFFF_t_70 1][]

3.下载pdfObject.js

[https://github.com/pipwerks/PDFObject/][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目录下。

[node.js]: https://nodejs.org/en/download/
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1NreWxpbmVfZGluZw_size_16_color_FFFFFF_t_70]: /images/20211018/65efdf27ff5946e9bd7e8c4e1f4d5d2c.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1NreWxpbmVfZGluZw_size_16_color_FFFFFF_t_70 1]: /images/20211018/19219c26ad3b443a96685587c103e9d3.png
[https_github.com_pipwerks_PDFObject]: https://github.com/pipwerks/PDFObject/