WebApp打开服务器端pdf文件

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里会自动对编码的内容进行解码，函数如下：