WebApp打开服务器端pdf文件

朴灿烈づ我的快乐病毒、 2022-04-13 13:13 322阅读 0赞

PDF.js是为html5实现的在线预览pdf框架，所以你的浏览器要支持html5才能使用这个框架。

# pdf.js使用步骤 #

## 一. 到官网下载 pdf.js 插件并解压 (地址: [http://mozilla.github.io/pdf.js/][http_mozilla.github.io_pdf.js] ) ##

### 1: 进入官网 ###

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3pjbjU5Njc4NTE1NA_size_16_color_FFFFFF_t_70]  
2 : 选择稳定版 下载  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3pjbjU5Njc4NTE1NA_size_16_color_FFFFFF_t_70 1]  
3: 下载至本地  
![在这里插入图片描述][20181129154554410.png]  
4 : 解压  
![在这里插入图片描述][2018112915463854.png]  
5:将解压后的文件夹重命名为generic拷贝到tomcat的webapps文件夹下：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3pjbjU5Njc4NTE1NA_size_16_color_FFFFFF_t_70 2]  
然后启动tomcat,输入以下网址测试：

http://localhost:8080/generic/web/viewer.html

这时就会出现一个酷酷的界面：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3pjbjU5Njc4NTE1NA_size_16_color_FFFFFF_t_70 3]  
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：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3pjbjU5Njc4NTE1NA_size_16_color_FFFFFF_t_70 4]  
就可以使用

http://localhost:8080/generic/web/viewer.html?file=test.pdf

来打开  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3pjbjU5Njc4NTE1NA_size_16_color_FFFFFF_t_70 5]  
以上使用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里会自动对编码的内容进行解码，函数如下：  
![在这里插入图片描述][20181129161554672.png]

[http_mozilla.github.io_pdf.js]: http://mozilla.github.io/pdf.js/
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3pjbjU5Njc4NTE1NA_size_16_color_FFFFFF_t_70]: /images/20220413/51c26c2d9d7242bd98fb8d80c17a27bd.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3pjbjU5Njc4NTE1NA_size_16_color_FFFFFF_t_70 1]: /images/20220413/a6297d47d52844f498a04d6dec48b035.png
[20181129154554410.png]: /images/20220413/e9790696ed484a48bc814c684aa614c8.png
[2018112915463854.png]: /images/20220413/5040ad5f0c54496095c9c016cd4597f7.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3pjbjU5Njc4NTE1NA_size_16_color_FFFFFF_t_70 2]: /images/20220413/243229c2475b4ba08fab4f7463b0abc3.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3pjbjU5Njc4NTE1NA_size_16_color_FFFFFF_t_70 3]: /images/20220413/0f0d3545086642eba6d4d5ab460b7394.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3pjbjU5Njc4NTE1NA_size_16_color_FFFFFF_t_70 4]: /images/20220413/3af39a13e5314b5f9d6142c5b2e13943.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3pjbjU5Njc4NTE1NA_size_16_color_FFFFFF_t_70 5]: /images/20220413/da35edbb540945878437ac4edfe30f91.png
[20181129161554672.png]: /images/20220413/5f68d0ce5c7f49f19473f98d12465af7.png