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);

});

};