您的位置:首页 > Web前端 > JavaScript

pdf.js文件流方式实现在线展示pdf文件

2016-08-04 16:56 113 查看

第一步:下载源码https://github.com/mozilla/pdf.js

第二步:构建PDF.js

第三步:修改viewer.js

var DEFAULT_URL = 'compressed.tracemonkey-pldi-09.pdf'  里面是PDF的路径

删除该变量定义;

第四步:通过ajax的方式获取文件流数据,并处理。

var DEFAULT_URL = "";//注意,删除的变量在这里重新定义
var PDFData = "";
$.ajax({
type:"post",
async:false,
mimeType: 'text/plain; charset=x-user-defined',
url:文件流请求地址,
success:function(data){
PDFData = data;
}
});
var rawLength = PDFData.length;
//转换成pdf.js能直接解析的Uint8Array类型,见pdf.js-4068
var array = new Uint8Array(new ArrayBuffer(rawLength));
for(i = 0; i < rawLength; i++) {
array[i] = PDFData.charCodeAt(i) & 0xff;
}
DEFAULT_URL = array;

 第五步:将上面的代码作为js文件或是代码片段,加入viewer.html(上面的代码要放在<script src="viewer.js"></script>引入之前)。

后端代码片段

response.setStatus(HttpServletResponse.SC_OK);
response.setContentType("application/pdf;charset=UTF-8");
input = new BufferedInputStream(httpUrl.getInputStream());
byte buffBytes[] = new byte[1024];
out = response.getOutputStream();
int read = 0;
while ((read = input.read(buffBytes)) != -1) {
out.write(buffBytes, 0, read);
}
out.flush();
out.close();

 

备注:附件为构建后的PDF.js

内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: