一：准备工作
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文件