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