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

最新推荐文章于 2024-08-22 12:02:21 发布

weixin_30527143

最新推荐文章于 2024-08-22 12:02:21 发布

阅读量970

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/xiaxianfei/p/5265247.html

版权

需求：

使用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">

    <div style="width:60%;height:90%" class="modal-dialog modal-lg">

        <div class="modal-content">

            <div class="modal-body" style="padding:0; height:700px">

                <iframe id="iframePreview" width='100%' height='700' allowfullscreen webkitallowfullscreen></iframe>

            </div>

        </div>

    </div>

</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();
                    }
                };

转载于:https://www.cnblogs.com/xiaxianfei/p/5265247.html