使用pdf.js+jsp 预览pdf

参考使用pdf.js在web页面展示pdf文件

一：准备工作

1.在pdf.js 官网下载 http://mozilla.github.io/pdf.js/ 到本地

2.把下载的压缩包pdfjs-2.2.228-dist.zip解压到pdfjs文件夹下，包含两个文件夹：build和web

3.把pdfjs文件夹放入你的项目 webapp目录下 (我的项目名称是web-demo)（例如 G:\workspace\web-demo\src\main\webapp）因为webapp目录下的文件可以通过浏览器路径访问

一：先看下pdf.js + jsp 实现预览pdf的效果

运行项目在浏览器输入http://localhost:8080/web-demo/pdfjs/web/viewer.html 就可以先看一下效果了。

4.pdf.js 渲染pdf 就是viewer.html文件实现的，它默认渲染的是和viewer.html文件同目录下的compressed.tracemonkey-pldi-09.pdf

设置加载这个文件的地方是：viewer.html文件同目录的viewer.js文件里设置的，修改这个属性的值就能够预览不同的文件，中英文的pdf文件都能成功预览。

defaultUrl: {
    value: 'compressed.tracemonkey-pldi-09.pdf',
    kind: OptionKind.VIEWER
}

二：实战从后端读取文件前端页面显示

1.添加依赖包

<dependency>
 <groupId>commons-io</groupId>
 <artifactId>commons-io</artifactId>
 <version>2.6</version>
</dependency>
<!-- jsp 文件 taglib依赖 --> 
<dependency>
 <groupId>taglibs</groupId>
 <artifactId>standard</artifactId>
 <version>1.1.2</version>
</dependency>

2.新建viewPdf.jsp文件

根据viewer.html文件渲染pdf文件，文件来源是从后端读取的，file后的参数后后端方法的mapping,这里要注意在 file 后的路径上加上项目名

<%@ page language="java" contentType="text/html; charset=UTF-8"
 pageEncoding="UTF-8"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<html>
<body>
 <h2>this is viewPdf page</h2>
 <iframe
  src="<c:url value="pdfjs/web/viewer.html" />?file=/web-demo/getPdfFile" width="100%" height="800"></iframe>
</body>
</html>

3.后端controller实现

import java.io.File;
import java.io.FileInputStream;
import java.io.OutputStream;

import javax.servlet.http.HttpServletResponse;

import org.apache.commons.io.IOUtils;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;

/**
 * 在线预览pdf
 */
@Controller
public class ViewPDFController {

 @RequestMapping("/viewPdf")
 public String viewPDF() {
  return "viewPdf";
 }

 @RequestMapping("/getPdfFile")
 public void getPDF(HttpServletResponse response) {
  try {
   File file = new File("G:/test.pdf");
   FileInputStream fileInputStream = new FileInputStream(file);
   response.setHeader("Content-Disposition", "attachment;fileName=test.pdf");
   response.setContentType("multipart/form-data");
   OutputStream outputStream = response.getOutputStream();
   IOUtils.write(IOUtils.toByteArray(fileInputStream), outputStream);
  } catch (Exception e) {
   e.printStackTrace();
  }
 }

}

4.运行项目，在浏览器输入 http://localhost:8080/web-demo/viewPdf 就可以看到效果了页面会显示G盘的test.pdf文件

使用pdf.js+jsp 预览pdf

浏览过的版块