JS通过使用PDFJS实现基于文件流的预览功能

2017-02-23 17:34:16

需求：

使用JS实现PDF文件预览功能

备选方案：

使用ViewerJS，官网 http://viewerjs.org/

使用PDFJS,官网 https://mozilla.github.io/pdf.js/

结论：

通过研究发现，Viewer JS预览pdf文件，其pdf文件只能url地址，不支持获取文件流到客户端，生成blob地址预览。而PDFJS能够支持

代码实践：

<div class="modal inmodal fade" id="previewModal" tabindex="-1" role="dialog" aria-hidden="true">
&lt;div style="width:60%;height:90%" class="modal-dialog modal-lg"&gt;

    &lt;div class="modal-content"&gt;

        &lt;div class="modal-body" style="padding:0; height:700px"&gt;

            &lt;iframe id="iframePreview" width='100%' height='700' allowfullscreen webkitallowfullscreen&gt;&lt;/iframe&gt;

        &lt;/div&gt;

    &lt;/div&gt;

&lt;/div&gt;

</div>

this.previewFile = function(fileUrl,fileType) { if (fileType === 'pdf') { var tmpUrl = 'vendor/pdfjs/web/viewer.html?file=' + encodeURIComponent(fileUrl); $("#iframePreview").attr("src", tmpUrl); angular.element('#previewModal').modal(); } };

慕容的工作随笔

JS通过使用PDFJS实现基于文件流的预览功能

评论 (0)

发表评论