JS通过使用PDFJS实现基于文件流的预览功能
2016-03-11 13:09
1051 查看
需求:
使用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) {
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实现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) {
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仿百度登录页实现拖动窗口效果
- javascript实现<area herf="...">新窗口打开
- doT.js——前端javascript模板引擎问题备忘录
- JavaScript 入门哪本书最好?(问、答) 《转载》
- [资料收集]js小技巧
- [连载]JavaScript讲义(02)--- JavaScript核心编程
- JS判断字符串是否为纯数字
- 关于 JavaScript prototype __proto__ 一点总结
- js数据格式转换
- google maps js v3 api教程(3) -- 创建infowindow
- google maps js v3 api教程(3) -- 创建infowindow
- SVG Path与d3下的 Path
- google maps js v3 api教程(3) -- 创建infowindow
- JSPatch实现原理详解
- javascript中parseInt函数的用法
- Ajaxfileupload 总结(包括插件处理json格式bug的解决方案)
- js获取当前浏览器内核版本信息
- JavaScript——innerHTML作用
- ExtJS4中GridPanel组件简单例子
- JavaScript高级教程