PDF.js是为html5实现的在线预览pdf框架,所以你的浏览器要支持html5才能使用这个框架。
pdf.js使用步骤
一. 到官网下载 pdf.js 插件并解压 (地址: http://mozilla.github.io/pdf.js/ )
1: 进入官网
2 : 选择稳定版 下载
3: 下载至本地
4 : 解压
5:将解压后的文件夹重命名为generic拷贝到tomcat的webapps文件夹下:
然后启动tomcat,输入以下网址测试:
http://localhost:8080/generic/web/viewer.html
这时就会出现一个酷酷的界面:
generic/web/viewer.html主要是渲染阅读器的样式,而generic/web/viewer.js可以指定默认打开的文件(当然还有其他功能),打开viewer.js,找到下面一段代码:
defaultUrl: {
value: 'compressed.tracemonkey-pldi-09.pdf',
kind: OptionKind.VIEWER
}
这里指定默认的pdf,要想打开指定的pdf文件,可以在http://localhost:8080/generic/web/viewer.html后面加上file参数。例如打开下面的test.pdf:
就可以使用
http://localhost:8080/generic/web/viewer.html?file=test.pdf
来打开
以上使用file传参是比较简单的方式,只要知道了文件名跟类型就行了。但是这种方式用在项目中的话只能打开项目里的pdf文件,换句话说就是PDF.js默认是不能打开项目外文件系统的文件,这时就需要自己写控制器来下载pdf文件。
控制器示例(基于spring boot框架):
/**
* 预览pdf文件
* @author Mike
* @param request
* @param response
* @param fileName
*/
@RequestMapping(value = "/downloadPdf", method = RequestMethod.GET)
public void pdfStreamHandeler(HttpServletRequest request, HttpServletResponse response,String fileName) {
String filePath = "D:/upload/supervision/" + fileName;
// System.out.println(fileName);
File file = new File(filePath);
byte[] data = null;
try {
FileInputStream input = new FileInputStream(file);
data = new byte[input.available()];
input.read(data);
response.getOutputStream().write(data);
input.close();
} catch (Exception e) {
System.out.print("pdf文件处理异常:" + e.getMessage());
}
}
其中fileName要包括文件后缀名。下面是前台调用控制器的示例:
window.location.href = "/pdfjs/web/viewer.html?file=" + encodeURIComponent("/downloadPdf?fileName=" + number + "." + type);
由于一个url中不能出现两个?号,所以需要用到js中的encodeURIComponent()来进行编码,然后viewer.js里会自动对编码的内容进行解码,函数如下: