pdf預覽
最近專案需要實現線上預覽pdf檔案功能，找來找去，發現有個pdf.js的類庫挺好用，直接用js實現線上預覽。
pdf.js是開源專案，github的地址：
https://github.com/mozilla/pdf.js
根據教程指引，有以下幾個步驟：
- clone原始碼到本地，如果是linux的話很方便，windows的話要另外下載git工具；
git地址：https://git-for-windows.github.io/
下載按預設安裝方式就行，然後在開始選單找到git開啟git cmd就可以clone原始碼，當然，也可以直接download原始碼，不過國內的下載的速度實在是太慢了，可以更改hosts檔案加快下載，在hosts檔案新增：
185.31.16.184 github.global.ssl.fastly.net
PS：其實我們使用pdf.js，只需要構建後的內容，大家可以到我的百度雲盤下載：http://pan.baidu.com/s/1bDK8Zs ，下載後複製generic到tomcat的webapps下，這樣訪問 http://localhost:8080/web/viewer.html 能看到demo效果，跳過以下步驟，直接到專案整合。
- clone好原始碼後使用nodejs的包管理工具npm安裝gulp構建工具，如下：
npm install -g gulp-cli
安裝好gulp之後在原始碼使用npm安裝模組：
npm install
安裝好模組後使用gulp構建本地web伺服器：
gulp server
效果如下：
接著訪問 http://localhost:8888/web/viewer.html 就能看到效果：
接下來使用gulp構建pdf.js，如下：
gulp generic
構建完成後專案目錄下生成build資料夾：
generic/web/viewer.html渲染pdf閱讀器頁面，而generic/web/viewer.js則是開啟指定的pdf檔案，開啟viewer.js
可以看到，預設開啟的是generic/web/compressed.tracemonkey-pldi-09.pdf檔案，再來看下面這段程式碼：
這樣，我們就可以使用傳遞file形參來動態指定開啟的pdf檔案，如：
http://localhost:8080/generic/web/viewer.html?file=file.pdf
-
接著把專案整合到web專案中， 把generic作為外掛使用，目錄結構如下：
先寫一個簡單的jsp頁面，使用iframe標籤來載入pdf：
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
<title>Title</title>
</head>
<body>
<iframe src="<c:url value="/res/pdf/web/viewer.html" />?file=/displayPDF.do"
width="100%" height="800"></iframe>
</body>
</html>
接著寫個controller讀取pdf檔案並返回：
import org.apache.commons.io.IOUtils;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import javax.servlet.http.HttpServletResponse;
import java.io.File;
import java.io.FileInputStream;
import java.io.OutputStream;
/**
* 線上預覽pdf
* @Auothor wzx
* @Date 2016/12/18 0018
*/
@Controller
public class DisplayPDFController {
@RequestMapping("/displayPDF.do")
public void displayPDF(HttpServletResponse response) {
try {
File file = new File("F:/資料/pdf/JVM基礎.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();
}
}
}
執行，在瀏覽器訪問以下地址：
http://localhost:8080/res/pdf.jsp
效果如下：
本質是訪問generic/web/viewer.html，通過指定的file形參開啟指定pdf檔案。
作者：半笙彷徨
連結：https://www.jianshu.com/p/4a3d8905d0ea
來源：簡書
簡書著作權歸作者所有，任何形式的轉載都請聯絡作者獲得授權並註明出處。