HTML+JavaScript+SpringBoot：实现网页浏览多个PDF文件，支持上下翻页

清疚 2024-03-23 12:09 24阅读 0赞

#### HTML+JavaScript+SpringBoot：实现网页浏览多个PDF文件，支持上下翻页 ####

*  前言
 *  一、HTML+JavaScript
 *  二、SpringBoot
 *  总结

--------------------

## 前言 ##

**在网页查看一个或者多个PDF文件是系统中常见的操作，有多个PDF文件时还要支持上下翻页**

**本文实现了一套完整的前后端交互的网页浏览 PDF 文件的代码，希望对大家有用**

--------------------

## 一、HTML+JavaScript ##

前端主要是写一个 html 页面，这个页面其实很简单，主要是翻页的按钮和 PDF文件显示

具体代码如下：

showImages.html
    
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>文件详情</title>
        <link rel="stylesheet" href="/css/bootstrap.min.css">
        <link rel="stylesheet" href="/css/jquery.dataTables.min.css">
        <link rel="stylesheet" href="/css/bootstrap-select.min.css">
        <link rel="stylesheet" href="/css/common.css">
        <link rel="stylesheet" href="/js/layer/theme/default/layer.css">
        <script src="/js/common/jquery.min.js"></script>
        <script src="/js/common/jquery-3.3.1.js"></script>
        <script src="/js/common/jquery.dataTables.min.js"></script>
        <script src="/js/common/jquery.cookie.js"></script>
        <script src="/js/common/bootstrap.min.js"></script>
        <script src="/js/layui/layui.js"></script>
        <script src="/js/layer/layer.js"></script>
        <script src="/js/templatejs/template-web.js"></script>
        <script src="/js/common/bootstrap-select.min.js"></script>
        <script src="/js/common/common.js?v=2.0"></script>
    </head>
    <body>
        <div id="btn" style="display:inline;text-align: center;margin-top: 100px;margin-bottom: 100px;">
            <button class="btn btn-primary align-middle" align="center" style="margin-left:50%;background-color: #1d77d2" id="up" onclick="up()">上一页</button>
            (<span style="font-size: large" id="pageNum"></span>/<span style="font-size: large" id="totalNum"></span>)
            <button class="btn btn-primary align-middle" align="center" style="background-color: #1d77d2" id="down" onclick="down()">下一页</button>
        </div>
        <div id="showImages"></div>
    </body>
    <script id="test" type="text/html">
    
    </script>
    <script src="/js/gd/showImages.js?v=0.9"></script>
    <style>
    
    </style>
    </html>

showImages.js
    
    var url = location.href;
    var fileList;
    var numArr = [];
    var pageNum = 0;
    $(document).ready(function () {
        
        show();
    });
    
    function show() {
        
        $("#showImages").html("");
        var theRequest = new Object();
        var paraString = url.substring(url.indexOf("？") + 1, url.length).split("&");
        if (url.indexOf("?") != -1) {
        
            for (var i = 1; i < paraString.length; i++) {
        
                theRequest[paraString[i].split("=")[0]] = unescape(paraString[i].split("=")[1]);
            }
        }
        var ywid = 0;
        ywid = theRequest["id"];
        $.ajax({
        
        	//先去获取总共有多少个文件资源
            url: "showZyList",
            type: 'post',
            data: {
        
                ywid:ywid
            },
            success: function (data) {
        
                fileList = data;
                //再显示第一个文书信息，后面的文件暂时不加载，用户点击下一页再加载
                $("#showImages").append("<embed style='position: relative;overflow:auto;width: 100%;height: 1200px' src='/showZy?id=" + fileList[0].id + "'></embed>")
                for (var i = 0; i < fileList.length; i++) {
        
                    if (fileList[i].zyurl.indexOf(".pdf") != -1||fileList[i].zyurl.indexOf(".PDF") != -1) {
        
                    //把文件的唯一标识符id存进去
                    //这样点击下一页后，可以根据文件id找相应的文书内容
                        numArr.push(fileList[i].id);
                        $("#btn").css("display", "inline");
                        $("#totalNum").html(fileList.length);
                        $("#pageNum").html(1);
                    } else {
        
                    //本地服务器上没有的文件，可以去别的服务器上下载
                        $("#showImages").append("<div align='center' class='layui-nav-img'><a href='/downloadFile?id=" + fileList[i].id + "'>" +
                            "<img style='width: 30%;height: 1200px' src='/dxtz/showZy?id=" + fileList[i].id + "'/>" +
                            "</a><p>请点击图片下载</p></div>")
                    }
                }
            }, error: function () {
        
                alert("查询文件详情失败")
            }
        });
    }
    
    var num = 0;
    
    //查看上一个文书
    function up() {
        
        pageNum--;
        if (pageNum >= 0) {
        
            num = numArr[pageNum]
            $("#pageNum").html(pageNum+1)
            $("#showImages").html("<embed style='position: relative;overflow:auto;width: 100%;height: 1200px' src='/showZy?id=" + num + "'></embed>")
        } else {
        
            pageNum++;
            alert("当前已是第一页!")
        }
    
    }
    
    //查看下一个文书
    function down() {
        
        pageNum++;
        if (pageNum < numArr.length) {
        
            num = numArr[pageNum]
            $("#pageNum").html(pageNum+1)
            $("#showImages").html("<embed style='position: relative;overflow:auto;width: 100%;height: 1200px' src='/showZy?id=" + num + "'></embed>")
        } else {
        
            pageNum--;
            alert("当前已是最后一页!")
        }
    }

## 二、SpringBoot ##

downloadController.java
    
    //根据短信id查询资源集合
    @RequestMapping(value = "/showZyList",method = RequestMethod.POST)
    @ResponseBody
    public List<PubZybInfoEntity> showZyList(@RequestParam String ywid){
        
    	   DynamicDataSource.router("文书信息库");//切换到文书信息库
    	   List<PubZybInfoEntity> zybInfoEntityList = pubZybInfoEntityMapper.selectZybList(ywid);
    	   return zybInfoEntityList;
    }
    
    //根据资源id查询文书详情
    @RequestMapping(value = "/showZy",method = RequestMethod.GET)
    public void showZy( HttpServletResponse response,@RequestParam("id") Integer id) throws IOException {
        
    	   DynamicDataSource.router("文书信息库");//切换到文书信息库
    	   PubZybInfoEntity zybInfoEntity = pubZybInfoEntityMapper.selectZyb(id);
    	   String url = "E:\\uploadFile\\"+zybInfoEntity.getZyurl();
    	   File file = null;
    	   FileInputStream inputStream = null;
    	   try {
        
    	       file = new File(url);
    	       if (!file.exists()){
        
    	           return;
    	       }
    	       inputStream = new FileInputStream(file);
    	       final byte[] bytes = new byte[1024];
    	       while (inputStream.read(bytes)>0){
        
    	           response.getOutputStream().write(bytes);
    	       }
    	   } catch (IOException e) {
        
    	       e.printStackTrace();
    	   } finally {
        
    	       if (inputStream!=null){
        
    	           inputStream.close();
    	       }
    	   }
    }

--------------------

## 总结 ##

**本文提供了 HTML+JavaScript+SpringBoot 的全套代码，非常的详细全面了**

**整理不易，如果觉得有用的话麻烦大家点赞+收藏哦！**

**希望对大家有用！**