使⽤pdf.js在线预览PDF（本地⽂件，服务器⽂件）
前⾔
不使⽤插件直接进⾏pdf预览时，对于⼩⽂件没有任何问题，但在预览⼀个305M，近400页的pdf⽂件时，打开pdf直接拉到最后⼏页，会造成浏览器崩溃，于是尝试使⽤pdf.js的插件⽅式进⾏pdf预览，解决⼤⽂件浏览器崩溃的问题。
1、下载地址
jquery在线库主要⽤到⾥边的 viewer.js 和 viewer.html ⽂件
2、打开⽂件夹，把这两个⽂件放进程序，⼀个是 build，⼀个是 web ⽂件夹，建议整个⽂件夹都放进去！到这差不多安装过程就 ok
了,viewer.html ⽂件⾥边有默认的 PDF ⽂件
测试⽅法window.open(' ../pdf/web/viewer.html')
3、到刚刚放⼊程序的⽂件，打开 web ⽂件⽬录，打开 viewer.js ⽂件到他默认展⽰的 PDF ⽂件的路径改为 value:’’ ( 也可以不修改 )
4、想要调⽤这个 JS 来预览 PDF ，⽅法跟上⽅测试⽅法差不多，只不过多加了⼀个条件
调⽤⽅法：windows.open("/pdf/web/viewer.html?file=file.pdf");
这个⽅法只能读取你 web ⽬录下的⽂件，如果想要读取你本地⽂件或者服务器⽂件就通过流的⽅式输出
5、获取本地/服务器⽂件
前端写法：通过点击事件触发预览
previewURL: 项⽬地址路径
filePath: 要打开的项⽬
encodeURIComponent：⽤于 url 特殊字符的转译（⽐如： ; / ? : @ & = + $ , # 这些⽤于分隔 URI 组件的标点符号）
// 点击调⽤预览⽅法
function xx(filePath){
var previewURL= "127.0.0.1:8080/";
window.open('../pdf/web/viewer.html?file='+encodeURIComponent(previewURL+"/test?url="+filePath));
}
后端写法：拿到⽂件地址，通过流的⽅式输出到移动端页⾯显⽰
// 通过⽂件流的⽅式预览 PDF ⽂件
@RequestMapping(value = "test")
public void pdfStreamHandeler(HttpServletRequest request, HttpServletResponse response, HttpSession session) {
// 获取路径
String filePath = Parameter("url");
File file = new File(filePath);
byte[] data = null;
try {
// 编辑请求头部信息
// 解决请求头跨域问题（IE兼容性也可使⽤该⽅法）
response.setHeader("Access-Control-Allow-Origin", "*");
response.setContentType("application/pdf");
FileInputStream input = new FileInputStream(file);
data = new byte[input.available()];
input.close();
} catch (Exception e) {
}
}
下⾯是我的项⽬中的调⽤⽅式：
/**
* 预览PDF
*/
@RequiresPermissions("dagl:pdf")
@Log(title = "PDF预览", businessType = BusinessType.DELETE)
@GetMapping("/pdfPreview/{dh}")
public String pdfPreview(@PathVariable("dh") String dh, ModelMap mmap)
{
mmap.put("pdf_url", PdfUrl());
return prefix + "/pdfPreview";
}
<!DOCTYPE html>
<html lang="zh" xmlns:th="" >
<head>
<link th:href="@{/css/update.css}" rel="stylesheet"/>
<th:block th:include="include :: header('PDF预览')"/>
<th:block th:include="include :: datetimepicker-css"/>
</head>
<body class="white-bg">
<iframe frameborder="0" id="pdfView"></iframe>
</body>
<script th:src="@{/js/jquery.min.js}"></script>
<script th:inline="javascript">
var pdf_url = [[${pdf_url}]];
var prefix = "/dagl";
$('#pdfView').attr('src', '/pdf/web/viewer.html?file=' + encodeURIComponent(prefix +"/pdfStreamHandeler?pdf_url=" + pdf_url)); </script>
</html>
// 通过⽂件流的⽅式预览 PDF ⽂件
@RequestMapping(value = "pdfStreamHandeler")
public void pdfStreamHandeler(HttpServletRequest request, HttpServletResponse response, HttpSession session) {
// 获取路径
String filePath = Parameter("pdf_url");
try {
if(StringUtils.isNotBlank(filePath)) {
byte[] data = fileDfsUtil.downLoadFile(filePath);
// 编辑请求头部信息
// 解决请求头跨域问题（IE兼容性也可使⽤该⽅法）
response.setHeader("Access-Control-Allow-Origin", "*");
response.setContentType("application/pdf");
}
} catch (Exception e) {
e.printStackTrace();
}
}
@Component
public class FileDfsUtil {
private static final Logger LOGGER = Logger(FileDfsUtil.class);
@Resource
private FastFileStorageClient storageClient ;
/**
* 上传⽂件
*/
public String upload(MultipartFile multipartFile,String fileName) throws Exception{
StorePath storePath = storageClient.InputStream(), Size(),
FullPath() ;
}
/**
* 删除⽂件
*/
public String deleteFile(String fileUrl) {
if (StringUtils.isEmpty(fileUrl)) {
return "fileUrl == >>⽂件路径为空...";
}
try {
StorePath storePath = StorePath.parseFromUrl(fileUrl);
storageClient.Group(), Path());
} catch (Exception e) {
Message();
}
return "OK";
}
public byte[] downLoadFile(String filePath){
StorePath storePath = StorePath.parseFromUrl(filePath);
return storageClient.Group(), Path(), new DownloadByteArray());
}
}
6、测试界⾯
7、常见问题
1).跨域错误：file origin does not match viewer’s
解决⽅式：到 viewer.js 中下⽅的这段代码注释掉
2).不到⽂件错误：这个问题原因是因为没有获取到你本地或者服务器⽂件，也就是 pdf > web ⽬录⾥没有这个 pdf ，因为它默认是获取这个⽬录下的 pdf ⽂件
解决⽅式：获取本地⽂件或者服务器⽂件路径，通过流的⽅式输出到页⾯上
3).⽂件损坏⽆法显⽰问题：出现这个问题⼀般都是你的 url 没有进⾏转码就直接请求到浏览器了，然后 url 存在的特殊字符会会让浏览器误认为你这个不是⼀个完整的链接
解决⽅式：查看前端访问的路径是否使⽤ encodeURIComponent 转码
8、如何隐藏插件⾃带的下载和打印功能？打开 viewer.html ⽂件，搜索<button id="download"在这个 button 按钮加上⼀个属
性就 ok 了，如下图
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论