最近項目需要實現(xiàn)在線預覽pdf文件功能,找來找去,發(fā)現(xiàn)有個pdf.js的類庫挺好用当船,直接用js實現(xiàn)在線預覽破镰。
pdf.js是開源項目餐曼,github的地址:
https://github.com/mozilla/pdf.js
根據(jù)教程指引,有以下幾個步驟:
- clone源碼到本地啤咽,如果是linux的話很方便晋辆,windows的話要另外下載git工具;
git地址:https://git-for-windows.github.io/
下載按默認安裝方式就行宇整,然后在開始菜單找到git打開git cmd就可以clone源碼瓶佳,當然,也可以直接download源碼鳞青,不過國內(nèi)的下載的速度實在是太慢了霸饲,可以更改hosts文件加快下載贝次,在hosts文件添加:
185.31.16.184 github.global.ssl.fastly.net
PS:其實我們使用pdf.js,只需要構(gòu)建后的內(nèi)容距境,大家可以到我的百度云盤下載:http://pan.baidu.com/s/1bDK8Zs 步藕,下載后復制generic到tomcat的webapps下,這樣訪問 http://localhost:8080/web/viewer.html 能看到demo效果傻工,跳過以下步驟霞溪,直接到項目集成。
- clone好源碼后使用nodejs的包管理工具npm安裝gulp構(gòu)建工具中捆,如下:
npm install -g gulp-cli
安裝好gulp之后在源代碼使用npm安裝模塊:
npm install
安裝好模塊后使用gulp構(gòu)建本地web服務器:
gulp server
效果如下:
接著訪問 http://localhost:8888/web/viewer.html 就能看到效果:
接下來使用gulp構(gòu)建pdf.js鸯匹,如下:
gulp generic
構(gòu)建完成后項目目錄下生成build文件夾:
generic/web/viewer.html渲染pdf閱讀器頁面,而generic/web/viewer.js則是打開指定的pdf文件泄伪,打開viewer.js
可以看到殴蓬,默認打開的是generic/web/compressed.tracemonkey-pldi-09.pdf文件,再來看下面這段代碼:
這樣蟋滴,我們就可以使用傳遞file形參來動態(tài)指定打開的pdf文件染厅,如:
http://localhost:8080/generic/web/viewer.html?file=file.pdf
-
接著把項目集成到web項目中, 把generic作為插件使用津函,目錄結(jié)構(gòu)如下:
先寫一個簡單的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
效果如下:
本質(zhì)是訪問generic/web/viewer.html球散,通過指定的file形參打開指定pdf文件尿赚。