實如今線預覽pdf文件(接口獲取文件)

時間 2019-12-20

標籤如今預覽 pdf 文件接口獲取简体版

原文原文鏈接

　　上一篇說了關於文檔轉成pdf格式的方法，本篇說明獲取相應的pdf在頁面加載獲取。css

　　本方法使用了第三方插件PDFObject（PDFObject官網地址） ,該插件支持的瀏覽器：Chrome, Firefox, Safari (macOS and iOS), IE 9-11, and MS Edge 等，親測挺好用的。要實現pdf在線預覽功能須要引入相關js，相關js能夠從github下載(github地址)，也能夠從我分享的百度雲連接下載，引入pdfobject.js/pdfobject.min.js便可。本demo僅僅展現經過接口來獲取相應pdf展現，具體的實現以下：html

一，定義後臺接口用於獲取相應的pdf文件git

    @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代碼用於請求和展現請求的數據github

<!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>