实现在线预览pdf文件(接口获取文件)
上一篇说了关于文档转成pdf格式的方法，本篇说明获取相应的pdf在页面加载获取。
本方法使用了第三方插件PDFObject（PDFObject官网地址） ,该插件支持的浏览器：Chrome, Firefox, Safari (macOS and iOS), IE 9-11, and MS Edge 等，亲测挺好用的。要实现pdf在线预览功能需要引入相关js，相关js可以从github下载(github地址)，也可以从我分享的百度云链接下载，提取码:tas2 ，引入pdfobject.js/pdfobject.min.js即可。本demo仅仅展示通过接口来获取相应pdf展示，具体的实现如下：
一，定义后台接口用于获取相应的pdf文件
@RequestMapping(value = "/getPdfFile/{fileName}", method = RequestMethod.GET)
public void getPdfFile(@RequestParam Map<String, String> param, HttpServletRequest request,
HttpServletResponse response, @PathVariable String fileName) throws IOException {
BufferedInputStream bis = null;
OutputStream os = null;
//上篇博客默认文件的hashcode值为文件名，此处暂且可以把fileName即hashCode当成文件的id操作
try {
// 文件名称,此处最好加一个fileName合法性判断
String newfileName = fileName+".pdf";byte[] buf = new byte[1024];
int len = 0;
response.reset();
response.setContentType("application/pdf;charset=utf-8");
//切记此处不可写成response.setHeader("Content-disposition", "attachment;filename=" + fileName);
//添加attachment浏览器会响应下载，预览会失败
response.setHeader("Content-Disposition:inline", "filename=" +newfileName);
String pdfPath = request.getServletContext().getRealPath("/convert") + File.separator + newfileName;
File file = new File(pdfPath);
if (file.exists()) {
FileInputStream fis = new FileInputStream(pdfPath);
if (fis != null) {
bis = new BufferedInputStream(fis);
os = response.getOutputStream();
while ((len = bis.read(buf)) != -1) {
os.write(buf, 0, len);
}
}
}
} catch (Exception e) {
e.printStackTrace();
} finally {
if (bis != null) {
bis.close();
}
if (os != null) {
os.close();
}
}
}
二，编写html/jsp代码用于请求和展示请求的数据
<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1" /> <title>pdf_priview</title> <style type="text/css"> @charset "UTF-8"; * { box-sizing: border-box; } body { font: 16px sans-serif; color: #454545; /*background: rgb(218,244,249);*/ background: #fff; margin: 0; padding: 3rem 2rem 2rem 2rem; } h1 { font-weight: normal; font-size: 1.4rem; color: #555; } .pdfobject-com { position: absolute; top: 0; left: 0; z-index: 2016; } .pdfobject-com a:link, .pdfobject-com a:visited { color: #fff; font-weight: bold; display: block; padding: .25rem 1rem; background: #6699FF; text-decoration: none; } .pdfobject-com a:hover, .pdfobject-com a:visited:hover { color: #FFF; background: #FF3366; text-decoration: none; } .pdfobject-com a:before { content: "\2190"; margin-right: .25rem; } </style> <style> .pdfobject-container { max-width: 100%; width: 800px; height: 800px; border: 10px solid rgba(0,0,0,.2); margin: 0; } </style> </head> <body> <div id="my-pdf"></div> <script src="${config.path()}scripts/pdfobject.min.js"></script> <script> var options = { //height: "400px",可以设置宽高，也可以在外部css设置 page: 1, //默认一开始加载展示第几页 fallbackLink: "<p>This is a <a href='[url]'>fallback link</a></p>", pdfOpenParams: { view: "FitV", pagemode: "thumbs", search: "lorem ipsum" } } //调用展示方法 PDFObject.embed("${config.path()}hhwy/fileview/getPdfFile/ba95e9a428c958b6f846934dacc15d9a", "#my-pdf", options); </script> </body> </html>
亲测可用，至此，文件上传，转pdf格式，并且在线预览功能完成。
