请完善代码<%@ page language
="java" import
="java.util.*" pageEncoding
="
gbk"%>
<%@ taglib uri
="
http://java.sun.com/jsp/jstl/functions" prefix
="fn" %>
<%@ taglib uri
="
http://java.sun.com/jsp/jstl/core" prefix
="c"%>
<%
String path
= request.getCon
textPath();
String basePath
= request.getS
cheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOC
TYPE html>
<
html>
<head>
<meta
charset="
gbk">
<meta name
="renderer"
content="webkit">
<title>PDF在线盖章系统</title>
<meta
http-equiv="X
-UA
-Compatible"
content="IE
=edge,
Chrome
=1" />
<meta name
="viewport"
content="width
=device
-width, initial
-scale
=1, maximum
-scale
=1">
<link rel
="stylesheet" href
="layui/css/layui.css" media
="all">
<link rel
="stylesheet"
type="
text/css" href
="layuis/css/common_main.css"/>
<script
type="
text/javascript" src
="jquery/jquery
-1.7.2.min.js"></script>
<script src
="layui/layui.all.js"
charset="
gbk"></script>
<script
type="
text/javascript" src
="js/pdf/pdf.min.js"
charset="
gbk"></script>
<script
type="
text/javascript" src
="js/pdf/jspdf.umd.min.js"
charset="
gbk"></script>
<script
type="
text/javascript" src
="js/pdf/pdf.worker.min.js"
charset="
gbk"></script>
<style
type="
text/css">
* {
box
-sizing: border
-box;
margin: 0;
padding: 0;
}
body {
font
-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans
-serif;
line
-height: 1.6;
color: #333;
background
-color: #f5f7fa;
padding: 20px;
}
.container {
max
-width: 1200px;
margin: 0 auto;
background: white;
border
-radius: 10px;
box
-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
overflow: hidden;
}
header {
background: #2c3e50;
color: white;
padding: 20px;
text-align: center;
}
h1 {
margin
-bottom: 10px;
}
.controls {
display: flex;
justify
-content: space
-between;
padding: 15px 20px;
background: #ecf0f1;
border
-bottom: 1px solid #ddd;
}
.button {
padding: 10px 15px;
border: none;
border
-radius: 5px;
cursor: pointer;
font
-weight: bold;
transition: background 0.3s;
}
.primary
-btn {
background: #3498db;
color: white;
}
.primary
-btn:hover {
background: #2980b9;
}
.secondary
-btn {
background: #2ecc71;
color: white;
}
.secondary
-btn2 {
background: #0095ff;
color: white;
}
.secondary
-btn3 {
background: #ff0009;
color: white;
}
.secondary
-btn:hover {
background: #27ae60;
}
.stamp
-selector {
display: flex;
align
-items: center;
gap: 10px;
}
.stamp
-preview {
width: 100px;
height: 100px;
border: 2px dashed #ccc;
border
-radius: 5px;
display: flex;
align
-items: center;
justify
-content: center;
cursor: pointer;
background: white;
overflow: hidden;
}
.stamp
-preview img {
max
-width: 90%;
max
-height: 90%;
}
.main
-content {
display: flex;
height: 97vh;
}
.stamp
-panel {
width: 250px;
padding: 20px;
background: #f8f9fa;
border
-right: 1px solid #ddd;
overflow
-y: auto;
}
.stamp
-item {
padding: 10px;
margin
-bottom: 10px;
border: 1px solid #ddd;
border
-radius: 5px;
cursor: pointer;
text-align: center;
background: white;
transition: transform 0.2s;
}
.stamp
-item:hover {
transform: scale(1.05);
border
-color: #3498db;
}
.pdf
-viewer {
flex: 1;
padding: 20px;
overflow: auto;
position: relative;
background: #e6e9ec;
display: flex;
justify
-content: center;
align
-items: flex
-start;
}
#pdf
-container {
position: relative;
box
-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
background: white;
}
.canvas
-container {
position: relative;
margin: 10px;
}
.stamp {
position: absolute;
cursor: move;
user
-select: none;
z
-index: 100;
}
.
text-stamp {
padding: 5px 10px;
border: 2px solid red;
border
-radius: 5px;
color: red;
font
-weight: bold;
background: rgba(255, 255, 255, 0.7);
}
.image
-stamp {
opacity: 0.9;
max
-width: 120px;
max
-height: 120px;
}
#file
-input {
display: none;
}
.file
-label {
display: inline
-block;
padding: 10px 15px;
background: #9b59b6;
color: white;
border
-radius: 5px;
cursor: pointer;
font
-weight: bold;
margin
-bottom: 15px;
}
.file
-label:hover {
background: #8e44ad;
}
.page
-controls {
margin: 10px 0;
text-align: center;
}
.page
-info {
margin: 0 15px;
font
-weight: bold;
}
.loading {
position: absolute;
top: 50%;
left: 50%;
transform: translate(
-50%,
-50%);
font
-size: 18px;
color: #3498db;
}
</style>
</head>
<body>
<div class
="container">
<div class
="main
-content">
<div>
<div class
="stamp
-panel">
<label for
="pdfFileInput" class
="file
-label">上传</label>
<input
type="file" id
="pdfFileInput" accept
=".pdf" style
="display: none;">
</div>
<div>
<button id
="save
-btn" class
="button secondary
-btn">保存</button>
<button id
="export
-btn" class
="button secondary
-btn2">导出</button>
<button id
="reset
-btn" class
="button secondary
-btn3">重置</button>
</div>
<h3>选择印章</h3>
<div class
="stamp
-item" data
-type="image" data
-src
="stamp.png">
<div>图片印章</div>
</div>
</div>
<div class
="pdf
-viewer">
<div id
="pdf
-container">
<div class
="loading" id
="loading
-message">请上传PDF文件</div>
<div class
="canvas
-container">
<canvas id
="pdfCanvas"></canvas>
</div>
</div>
</div>
</div>
</div>
本文深入解析了JSP编码与HTML页面显示编码的差异，解释了它们各自的作用，以及如何避免因编码不一致导致的页面乱码问题。
扫一扫
6114
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
