实现在线预览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格式，并且在线预览功能完成。

posted @ 2019-11-05 15:13  ID_小汤  阅读(5651)  评论(0)    收藏  举报