JS uses Pdfjs to implement file stream-based preview features

Demand:

Using JS to achieve PDF file Preview function

Alternative options:

1. Using Viewerjs, official website http://viewerjs.org/

1. Using PDFJS, official website https://mozilla.github.io/pdf.js/

Conclusion:

Through research found that the Viewer JS preview pdf file, its PDF file can only URL address, do not support to get the file stream to the client, generate BLOB address preview. and PDFJS can support

Code practices:

<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= ' "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 uses Pdfjs to implement file stream-based preview features