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

Posted 金木龙

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了JS通过使用PDFJS实现基于文件流的预览功能相关的知识,希望对你有一定的参考价值。

需求:

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

备选方案:

  1. 使用ViewerJS,官网  http://viewerjs.org/
  1. 使用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) {

    getBlobUrl(fileUrl, fileType, callBack);

    function callBack(data) {

        var fileURL= data;

        $("#iframePreview").attr("src", ‘vendor/pdfjs/web/viewer.html?file=‘ + fileURL);

        $(‘#previewModal‘).modal();

    }

}; 

 

this.getBlobUrl = function (url, fileType, callBack) {

    sendRequest({ url: url, responseType: ‘arraybuffer‘ },

        function (data) {

            var file = new Blob([new Uint8Array(data)], { type: ‘application/octet-stream‘ });

            var fileURL = URL.createObjectURL(file);

            fileURL = encodeURIComponent(fileURL).replace(‘blob:http‘, ‘blob:https‘);

            fileURL = fileURL.replace(‘%3A9090‘, ‘‘);

            callBack(fileURL);

        });

};  

 

以上是关于JS通过使用PDFJS实现基于文件流的预览功能的主要内容,如果未能解决你的问题,请参考以下文章

用openoffice+jodconverter+webuploader+pdf.js实现文件上传在线预览功能

pdfjs优化,实现按需加载,节省流量和内存

如何创建pdf的buffer,让pdf.js实现预览pdf文件

实现在线预览PDF的几种解决方案

vue项目中使用pdfjs-dist预览pdf文件+分页并兼容字体

解决pdf.js无法完全显示pdf文件内容的问题