一：準備工作
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文件