通过PDF.js实现PDF文件在线预览

你的名字 2023-06-12 13:29 42阅读 0赞

**1.官网下载PDF.js**

我的资源地址：[https://download.csdn.net/download/rexueqingchun/11974119][https_download.csdn.net_download_rexueqingchun_11974119]

**2.下载解压后放到项目资源文件目录中**

**![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3JleHVlcWluZ2NodW4_size_16_color_FFFFFF_t_70][]**

**   **如上图所示，Springboot项目可直接放在static目录下

**3.预览PDF文件**

**   **由于PDF插件的模版文件为[viewer.html][]，所以预览请求的固定地址为[http://localhost/pdfjs/web/viewer.html?file=][viewer.html]参数

这里有两种不同的参数格式，分别为预览项目内部文件和外部文件：

(1)预览项目内部文件

![2019111310503447.png][]

如：项目static下面的upload/劝阻工作指引.pdf

预览地址为[http://localhost/pdfjs/web/viewer.html?file=/upload/劝阻工作指引.pdf][viewer.html]

(2)预览项目外部文件

如：预览磁盘上的文件C:\\FTP\\upload\\劝阻工作指引.pdf，则发送请求到后台处理

预览地址为[http://localhost/pdfjs/web/viewer.html?file=/ggzyYl][viewer.html]

请求的后台代码：

@RequestMapping(value = "ggzyYl", method = {RequestMethod.GET, RequestMethod.POST })
    public void ggzyYl(HttpServletRequest request, HttpServletResponse response) {
        String path = "C:/FTP/upload/劝阻工作指引.pdf";
    	File file = new File(path);
    	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.println("文件处理异常");
    	}
    }

[https_download.csdn.net_download_rexueqingchun_11974119]: https://download.csdn.net/download/rexueqingchun/11974119
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3JleHVlcWluZ2NodW4_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/2019111310323221.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3JleHVlcWluZ2NodW4=,size_16,color_FFFFFF,t_70
[viewer.html]: http://localhost/pdfjs/web/viewer.html
[2019111310503447.png]: https://img-blog.csdnimg.cn/2019111310503447.png