html在线预览pdf文件

最新推荐文章于 2024-07-29 15:31:57 发布

tiger_angel

最新推荐文章于 2024-07-29 15:31:57 发布

阅读量3.1k

点赞数

分类专栏： # vue 前段

本文链接：https://blog.csdn.net/qq_38567039/article/details/88534437

版权

vue 同时被 2 个专栏收录

16 篇文章 2 订阅

订阅专栏

前段

10 篇文章 0 订阅

订阅专栏

java后端写一个获取pdf的接口:
下面两个接口都能使用
 @RequestMapping(value="/show_attach")
    public void show_attach(HttpServletRequest request, HttpServletResponse response){
        FileInputStream bis = null;
        OutputStream os = null;
        try {
//            if("pdf".equalsIgnoreCase(type)){
//
//            }else{
//                response.setContentType("image/"+type);
//            }
            response.setContentType("application/pdf");
            bis = new FileInputStream("D:\\aa.PDF");
            os = response.getOutputStream();
            int count = 0;
            byte[] buffer = new byte[1024 * 1024];
            while ((count =bis.read(buffer)) != -1){
                os.write(buffer, 0,count);
            }
            os.flush();
        }catch (Exception e) {
            e.printStackTrace();
        } finally {
            if (os !=null){
                try {
                    os.close();
                } catch (IOException e) {
                    e.printStackTrace();
                }
            }
            if (bis !=null){
                try {
                    bis.close();
                } catch (IOException e) {
                    e.printStackTrace();
                }
            }
        }
    }
    @RequestMapping(value = "/pdfStreamHandeler")
    @ResponseBody
    public void pdfStreamHandeler(String filePath, HttpServletRequest request, HttpServletResponse response) {
        filePath = "D:\\aa.PDF";
        File file = new File(filePath);
        byte[] data = null;
        try {
            FileInputStream input = new FileInputStream(file);
            data = new byte[input.available()];
            input.read(data);
            response.getOutputStream().write(data);
            input.close();
        } catch (Exception e) {
            e.printStackTrace();
        }
    }

在html页面导入:

在html页面导入:   pdfobject.js
<script th:src="@{/js/pdfobject.js}" ></script>

<body>
   <!-- 定义一个标签-->
   <div id="example1"></div>
   <script>
       /*访问后端接口放入到标签中去*/
       PDFObject.embed("http://localhost:8080/qbcs/show_attach", "#example1");
   
   </script>
</body>
</html>

最后效果可用css设置大小外观: