HTML+JavaScript+SpringBoot：实现网页浏览多个PDF文件，支持上下翻页
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.jsvar 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 的全套代码，非常的详细全面了
整理不易，如果觉得有用的话麻烦大家点赞+收藏哦！
希望对大家有用！
