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

第一步：下载源码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

评论

7 楼 liao2991 2019-07-04  

FDS

6 楼 潺潺溪流 2017-08-25  

chen_3010 写道

你好， 能否提供下后台处理pdf文件的完整代码 ， 这样看的有点云里雾里！

你可能对这个（input = new BufferedInputStream(httpUrl.getInputStream());）不明白，这个其实就是获取文件流，我示例是获取远程文件服务器上对应的文件的文件流。

5 楼 潺潺溪流 2017-08-25  

niuxuedong 写道

您好，没看明白你处理之后是怎么给页面展示的，还请指导下，[e-mail]
非常感谢

感觉挺明白了，只是替换了官网viewer.js（DEFAULT_URL）的变量定义

4 楼 kkkmoving 2017-08-22  

你好，请问一下你这种方案在IE9下测试过没有哇？
我在IE9下貌似不行，另外我用官网DEMO，在IE9下，也出现第一页无法展示的问题(后续页都没有问题，可以正常显示)。

3 楼 u010907871 2017-07-13  

您好 劳烦提供下完整代码吧  感谢

2 楼 niuxuedong 2017-04-09  

您好，没看明白你处理之后是怎么给页面展示的，还请指导下，[e-mail]
非常感谢

1 楼 chen_3010 2017-03-17  

你好， 能否提供下后台处理pdf文件的完整代码 ， 这样看的有点云里雾里！