pdf.js 实现PDF在线预览功能
一、下载地址
若失效请自行搜索下载链接
http://mozilla.github.io/pdf.js/getting_started/#download
二、解压和配置
我在此处将文件放入到项目的static目录下
三、页面
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.pdf_box{
width: 500px;
height: 800px;
border: 1px solid silver;
}
</style>
</head>
<body>
<div style="margin: 0 auto">
<h1>PDF测试页面</h1>
<div>
<p>PDF预览方式一</p>
<!--项目目录中的文件-->
<iframe src="/pdf/web/viewer.html?file=/test/docker.pdf" width="100%" height="400px;"></iframe>
<!--电脑本地文件-->
<iframe src="/pdf/web/viewer.html?file=/apply/preview" width="100%" height="400px" style="margin-top: 50px"></iframe>
</div>
</div>
</body>
</html>
其中，第一部分为项目目录中的一个PDF文件
第二部分为电脑上存放的本地文件 C:\Users\DELL\Desktop\Mybatis.pdf
/**
* 预览文件
* @param response
* @param
* @return
* @throws Exception
*/
@RequestMapping("/preview")
@ResponseBody
public String previewMaterial(HttpServletResponse response)throws Exception {
String pdf = "C:\\Users\\DELL\\Desktop\\Mybatis.pdf";
try {
File file = new File(pdf);
if (file.exists()){
byte[] data = null;
FileInputStream input = new FileInputStream(file);
data = new byte[input.available()];
input.read(data);
response.getOutputStream().write(data);
input.close();
}
} catch (IOException e) {
System.out.println(e);
}
return "";
}
四、效果
五、问题
我的电脑中安装了IDM，会导致预览失败，若出现此类问题，打开IDM->下载->选项->文件类型->编辑列表->添加当前网站，设置IDM不在此页面自动下载。