117 lines
3.6 KiB
HTML
117 lines
3.6 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="zh-CN">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>简单按钮测试</title>
|
||
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2pdf.js/0.10.1/html2pdf.bundle.min.js"></script>
|
||
<style>
|
||
body {
|
||
font-family: Arial, sans-serif;
|
||
padding: 20px;
|
||
}
|
||
#test-content {
|
||
width: 794px;
|
||
min-height: 1123px;
|
||
background: white;
|
||
border: 1px solid #ccc;
|
||
padding: 40px;
|
||
margin: 20px auto;
|
||
}
|
||
button {
|
||
display: block;
|
||
margin: 20px auto;
|
||
padding: 15px 30px;
|
||
font-size: 18px;
|
||
background: #3b82f6;
|
||
color: white;
|
||
border: none;
|
||
border-radius: 8px;
|
||
cursor: pointer;
|
||
}
|
||
button:hover {
|
||
background: #2563eb;
|
||
}
|
||
button:active {
|
||
transform: scale(0.98);
|
||
}
|
||
.status {
|
||
text-align: center;
|
||
margin: 10px;
|
||
padding: 10px;
|
||
border-radius: 5px;
|
||
}
|
||
.success {
|
||
background: #d1fae5;
|
||
color: #065f46;
|
||
}
|
||
.error {
|
||
background: #fee2e2;
|
||
color: #991b1b;
|
||
}
|
||
.loading {
|
||
background: #fef3c7;
|
||
color: #92400e;
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<h1 style="text-align: center;">简单按钮功能测试</h1>
|
||
|
||
<div id="status" class="status"></div>
|
||
|
||
<button onclick="testButton()">测试生成报告按钮</button>
|
||
|
||
<div id="test-content">
|
||
<h2>测试报告内容</h2>
|
||
<p>这是一个简单的测试报告内容。</p>
|
||
<p>如果这个按钮工作正常，你应该能够下载一个PDF文件。</p>
|
||
<p>当前时间: <span id="current-time"></span></p>
|
||
<div style="width: 300px; height: 200px; background: linear-gradient(45deg, #3b82f6, #8b5cf6); margin: 20px auto; border-radius: 10px;"></div>
|
||
</div>
|
||
|
||
<script>
|
||
document.getElementById('current-time').textContent = new Date().toLocaleString();
|
||
|
||
function setStatus(message, type = '') {
|
||
const statusEl = document.getElementById('status');
|
||
statusEl.textContent = message;
|
||
statusEl.className = 'status ' + type;
|
||
}
|
||
|
||
async function testButton() {
|
||
console.log('测试按钮被点击');
|
||
setStatus('开始生成PDF...', 'loading');
|
||
|
||
const element = document.getElementById('test-content');
|
||
|
||
// 简单的html2pdf配置
|
||
const opt = {
|
||
margin: 10,
|
||
filename: 'test-report-' + Date.now() + '.pdf',
|
||
image: { type: 'jpeg', quality: 0.95 },
|
||
html2canvas: {
|
||
scale: 2,
|
||
useCORS: true,
|
||
logging: true,
|
||
},
|
||
jsPDF: { unit: 'mm', format: 'a4', orientation: 'portrait' }
|
||
};
|
||
|
||
try {
|
||
console.log('调用html2pdf...');
|
||
await html2pdf().set(opt).from(element).save();
|
||
console.log('PDF生成成功');
|
||
setStatus('PDF生成成功！文件已开始下载。', 'success');
|
||
} catch (error) {
|
||
console.error('PDF生成失败:', error);
|
||
setStatus('PDF生成失败: ' + error.message, 'error');
|
||
}
|
||
}
|
||
|
||
// 初始状态
|
||
setStatus('点击上方按钮测试PDF生成功能', '');
|
||
console.log('测试页面加载完成');
|
||
</script>
|
||
</body>
|
||
</html> |