使⽤pdf.js+jsp预览pdf
参考
⼀:准备⼯作
1.在pdf.js 官⽹下载到本地
2.把下载的压缩包pdfjs-2.2.228-dist.zip解压到pdfjs⽂件夹下,包含两个⽂件夹:build和web
3.把pdfjs⽂件夹放⼊你的项⽬ webapp⽬录下 (我的项⽬名称是web-demo)(例如)因为webapp⽬录下的⽂件可以通过浏览器路径访问
⼀:先看下pdf.js + jsp 实现预览pdf的效果
运⾏项⽬在浏览器输⼊就可以先看⼀下效果了。
4.pdf.js 渲染pdf 就是viewer.html⽂件实现的,它默认渲染的是和viewer.html⽂件同⽬录下的acemonkey-pldi-09.pdf
设置加载这个⽂件的地⽅是:viewer.html⽂件同⽬录的viewer.js⽂件⾥设置的,修改这个属性的值就能够
预览不同的⽂件,中英⽂的pdf⽂件都能成功预览。
defaultUrl: {
value: 'acemonkey-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="java.sun/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.apachemons.io.IOUtils;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
/**
* 在线预览pdf
*/
@Controller
public class ViewPDFController {
@RequestMapping("/viewPdf")
为什么前端不学jsppublic 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 = OutputStream();
IOUtils.ByteArray(fileInputStream), outputStream);
} catch (Exception e) {
e.printStackTrace();
}
}
}
4.运⾏项⽬,在浏览器输⼊就可以看到效果了页⾯会显⽰G盘的test.pdf⽂件