You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

296 lines
9.3 KiB

This file contains ambiguous Unicode characters!

This file contains ambiguous Unicode characters that may be confused with others in your current locale. If your use case is intentional and legitimate, you can safely ignore this warning. Use the Escape button to highlight these characters.

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>SSE数据生成页面</title>
<style>
body {
font-family: Arial, sans-serif;
max-width: 800px;
margin: 0 auto;
padding: 20px;
background-color: #f5f5f5;
}
.container {
background: white;
padding: 30px;
border-radius: 8px;
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}
h1 {
color: #333;
text-align: center;
margin-bottom: 30px;
}
.button-container {
text-align: center;
margin-bottom: 30px;
}
#generateBtn {
background-color: #007bff;
color: white;
border: none;
padding: 12px 30px;
font-size: 16px;
border-radius: 5px;
cursor: pointer;
transition: background-color 0.3s;
}
#generateBtn:hover {
background-color: #0056b3;
}
#generateBtn:disabled {
background-color: #6c757d;
cursor: not-allowed;
}
.status {
text-align: center;
margin-bottom: 20px;
font-weight: bold;
}
.status.connecting {
color: #ffc107;
}
.status.connected {
color: #28a745;
}
.status.error {
color: #dc3545;
}
.status.completed {
color: #17a2b8;
}
.data-area {
border: 1px solid #ddd;
border-radius: 5px;
padding: 15px;
min-height: 300px;
max-height: 400px;
overflow-y: auto;
background-color: #f8f9fa;
font-family: 'Courier New', monospace;
font-size: 14px;
line-height: 1.4;
white-space: pre-wrap;
word-wrap: break-word;
}
.download-section {
margin-top: 20px;
padding: 15px;
background-color: #e9ecef;
border-radius: 5px;
}
.download-links {
margin-top: 10px;
}
.download-link {
display: inline-block;
margin: 5px 10px 5px 0;
padding: 8px 15px;
background-color: #28a745;
color: white;
text-decoration: none;
border-radius: 4px;
transition: background-color 0.3s;
}
.download-link:hover {
background-color: #218838;
text-decoration: none;
color: white;
}
.clear-btn {
background-color: #6c757d;
color: white;
border: none;
padding: 8px 15px;
border-radius: 4px;
cursor: pointer;
margin-top: 10px;
}
.clear-btn:hover {
background-color: #545b62;
}
</style>
</head>
<body>
<div class="container">
<h1>SSE数据生成器</h1>
<div class="button-container">
<button id="generateBtn" onclick="startGeneration()">生成</button>
</div>
<div id="status" class="status">准备就绪</div>
<div class="data-area" id="dataArea">等待数据...</div>
<button class="clear-btn" onclick="clearData()">清空数据</button>
<div class="download-section">
<h3>下载文件:</h3>
<div id="downloadLinks" class="download-links">
<span style="color: #6c757d;">暂无可下载文件</span>
</div>
</div>
</div>
<script>
let eventSource = null;
let downloadUrls = [];
function startGeneration() {
const generateBtn = document.getElementById('generateBtn');
const statusDiv = document.getElementById('status');
const dataArea = document.getElementById('dataArea');
// 禁用按钮
generateBtn.disabled = true;
generateBtn.textContent = '生成中...';
// 清空之前的数据
dataArea.textContent = '';
downloadUrls = [];
updateDownloadLinks();
// 更新状态
statusDiv.textContent = '正在连接...';
statusDiv.className = 'status connecting';
// 创建SSE连接
// 注意请将下面的URL替换为你的实际接口地址
eventSource = new EventSource('http://xxx/a.action');
eventSource.onopen = function(event) {
statusDiv.textContent = '连接成功,等待数据...';
statusDiv.className = 'status connected';
};
eventSource.onmessage = function(event) {
const data = event.data;
// 在数据区域显示接收到的数据
dataArea.textContent += data + '\n';
// 自动滚动到底部
dataArea.scrollTop = dataArea.scrollHeight;
// 检查是否包含下载链接
checkForDownloadLinks(data);
};
eventSource.onerror = function(event) {
console.error('SSE连接错误:', event);
statusDiv.textContent = '连接错误或已断开';
statusDiv.className = 'status error';
// 重新启用按钮
generateBtn.disabled = false;
generateBtn.textContent = '生成';
// 关闭连接
if (eventSource) {
eventSource.close();
eventSource = null;
}
};
// 监听自定义事件(如果服务器发送特定事件类型)
eventSource.addEventListener('complete', function(event) {
statusDiv.textContent = '数据生成完成';
statusDiv.className = 'status completed';
// 重新启用按钮
generateBtn.disabled = false;
generateBtn.textContent = '生成';
// 关闭连接
eventSource.close();
eventSource = null;
});
}
function checkForDownloadLinks(data) {
// 使用正则表达式匹配URL模式
const urlPattern = /https?:\/\/[^\s]+\.(docx|pdf|xlsx|txt|zip|rar)/gi;
const matches = data.match(urlPattern);
if (matches) {
matches.forEach(url => {
if (!downloadUrls.includes(url)) {
downloadUrls.push(url);
}
});
updateDownloadLinks();
}
}
function updateDownloadLinks() {
const downloadLinksDiv = document.getElementById('downloadLinks');
if (downloadUrls.length === 0) {
downloadLinksDiv.innerHTML = '<span style="color: #6c757d;">暂无可下载文件</span>';
return;
}
let linksHtml = '';
downloadUrls.forEach((url, index) => {
const fileName = url.split('/').pop() || `文件${index + 1}`;
linksHtml += `<a href="${url}" class="download-link" target="_blank" download>${fileName}</a>`;
});
downloadLinksDiv.innerHTML = linksHtml;
}
function clearData() {
const dataArea = document.getElementById('dataArea');
dataArea.textContent = '等待数据...';
// 可选:也清空下载链接
// downloadUrls = [];
// updateDownloadLinks();
}
// 页面卸载时关闭SSE连接
window.addEventListener('beforeunload', function() {
if (eventSource) {
eventSource.close();
}
});
// 停止生成功能(可选)
function stopGeneration() {
if (eventSource) {
eventSource.close();
eventSource = null;
const generateBtn = document.getElementById('generateBtn');
const statusDiv = document.getElementById('status');
generateBtn.disabled = false;
generateBtn.textContent = '生成';
statusDiv.textContent = '已停止';
statusDiv.className = 'status error';
}
}
</script>
</body>
</html>