前言
因为要实现业务需求如下图，业务逻辑，该凭证为前端代码实现，为了简单方便实现下载为pdf的需求。
一、怎么在前端直接生成PDF？
需求描述：浏览器打开的这个页面，点击下载，把当前弹框页面的进行转换为pdf二、具体实现代码如下：
代码如下：
代码如下（示例）：
c
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>可靠的弹框内容转PDF</title>
<script src="https://cdn.tailwindcss.com"></script>
<link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
<!-- 引入必要的PDF生成库 -->
<script src="https://html2canvas.hertzen.com/dist/html2canvas.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.1/jspdf.umd.min.js"></script>
<script>
tailwind.config = {
theme: {
extend: {
colors: {
primary: '#4F46E5',
secondary: '#10B981',
},
}
}
}
</script>
<style type="text/tailwindcss">
@layer utilities {
.modal-backdrop {
@apply fixed inset-0 bg-black/50 flex items-center justify-center z-50 opacity-0 pointer-events-none transition-opacity duration-300;
}
.modal-backdrop.active {
@apply opacity-100 pointer-events-auto;
}
.modal-content {
@apply bg-white rounded-lg shadow-xl max-w-2xl w-full max-h-[90vh] overflow-y-auto transform scale-90 opacity-0 transition-all duration-300;
}
.modal-backdrop.active .modal-content {
@apply scale-100 opacity-100;
}
.toast {
@apply fixed bottom-4 right-4 px-4 py-3 rounded-lg shadow-lg z-50 transform translate-y-10 opacity-0 transition-all duration-300;
}
.toast.show {
@apply translate-y-0 opacity-100;
}
}
</style>
</head>
<body class="bg-gray-50 min-h-screen p-4 md:p-8">
<div class="max-w-4xl mx-auto">
<h1 class="text-2xl md:text-3xl font-bold text-gray-800 mb-8 text-center">员工信息管理系统</h1>
<button id="openModal" class="bg-primary hover:bg-primary/90 text-white font-medium py-2 px-6 rounded-lg transition-all duration-300 mx-auto block">
<i class="fa fa-user-circle mr-2"></i>查看员工信息
</button>
</div>
<!-- 员工信息弹框 -->
<div id="employeeModal" class="modal-backdrop">
<div class="modal-content">
<div class="p-6 border-b border-gray-200">
<h2 class="text-xl font-bold text-gray-800">员工详细信息</h2>
</div>
<!-- 要导出为PDF的内容 -->
<div id="employeeInfo" class="p-6">
<div class="flex flex-col md:flex-row gap-6 items-center mb-8">
<div class="w-24 h-24 rounded-full bg-primary/10 flex items-center justify-center">
<i class="fa fa-user text-4xl text-primary"></i>
</div>
<div>
<h3 class="text-2xl font-bold text-gray-800">张三</h3>
<p class="text-gray-600">软件工程师</p>
</div>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-8">
<div>
<h4 class="text-sm font-medium text-gray-500 mb-1">员工编号</h4>
<p class="text-gray-800">EMP2023001</p>
</div>
<div>
<h4 class="text-sm font-medium text-gray-500 mb-1">入职日期</h4>
<p class="text-gray-800">2023年1月15日</p>
</div>
<div>
<h4 class="text-sm font-medium text-gray-500 mb-1">联系电话</h4>
<p class="text-gray-800">13800138000</p>
</div>
<div>
<h4 class="text-sm font-medium text-gray-500 mb-1">电子邮箱</h4>
<p class="text-gray-800">zhangsan@company.com</p>
</div>
</div>
<div class="mb-8">
<h4 class="text-base font-semibold text-gray-800 mb-3">教育背景</h4>
<div class="pl-4 border-l-2 border-primary space-y-4">
<div>
<p class="font-medium text-gray-800">计算机科学与技术 - 本科</p>
<p class="text-sm text-gray-600">北京大学 | 2016-2020</p>
</div>
<div>
<p class="font-medium text-gray-800">软件工程 - 硕士</p>
<p class="text-sm text-gray-600">清华大学 | 2020-2022</p>
</div>
</div>
</div>
<div>
<h4 class="text-base font-semibold text-gray-800 mb-3">工作技能</h4>
<div class="flex flex-wrap gap-2">
<span class="px-3 py-1 bg-blue-100 text-blue-800 rounded-full text-sm">Java</span>
<span class="px-3 py-1 bg-blue-100 text-blue-800 rounded-full text-sm">Spring Boot</span>
<span class="px-3 py-1 bg-blue-100 text-blue-800 rounded-full text-sm">MySQL</span>
<span class="px-3 py-1 bg-blue-100 text-blue-800 rounded-full text-sm">Redis</span>
<span class="px-3 py-1 bg-blue-100 text-blue-800 rounded-full text-sm">微服务</span>
</div>
</div>
</div>
<div class="p-6 border-t border-gray-200 flex justify-end gap-4">
<button id="closeModal" class="px-5 py-2 border border-gray-300 rounded-lg text-gray-700 hover:bg-gray-50 transition-colors">
关闭
</button>
<button id="exportPdf" class="px-5 py-2 bg-secondary text-white rounded-lg hover:bg-secondary/90 transition-colors">
<i class="fa fa-download mr-2"></i>导出PDF
</button>
</div>
</div>
</div>
<!-- 提示消息 -->
<div id="toast" class="toast">
<span id="toastMessage"></span>
</div>
<script>
// 等待DOM加载完成
document.addEventListener('DOMContentLoaded', function() {
// 获取DOM元素
const modal = document.getElementById('employeeModal');
const openModalBtn = document.getElementById('openModal');
const closeModalBtn = document.getElementById('closeModal');
const exportPdfBtn = document.getElementById('exportPdf');
const employeeInfo = document.getElementById('employeeInfo');
const toast = document.getElementById('toast');
const toastMessage = document.getElementById('toastMessage');
// 显示提示消息
function showToast(message, isError = false) {
toastMessage.textContent = message;
toast.className = `toast show ${isError ? 'bg-red-100 text-red-800' : 'bg-green-100 text-green-800'}`;
setTimeout(() => {
toast.className = 'toast';
}, 3000);
}
// 打开弹框
openModalBtn.addEventListener('click', function() {
modal.classList.add('active');
document.body.style.overflow = 'hidden';
});
// 关闭弹框
function closeModal() {
modal.classList.remove('active');
document.body.style.overflow = '';
}
closeModalBtn.addEventListener('click', closeModal);
// 点击弹框外部关闭
modal.addEventListener('click', function(e) {
if (e.target === modal) {
closeModal();
}
});
// 导出PDF功能
exportPdfBtn.addEventListener('click', async function() {
// 保存原始按钮状态
const originalText = this.innerHTML;
this.disabled = true;
this.innerHTML = '<i class="fa fa-spinner fa-spin mr-2"></i>正在导出...';
try {
// 1. 创建一个临时的内容容器，确保样式正确
const tempContainer = document.createElement('div');
tempContainer.style.width = '210mm'; // A4宽度
tempContainer.style.padding = '20mm';
tempContainer.style.backgroundColor = 'white';
tempContainer.style.position = 'absolute';
tempContainer.style.top = '-9999px';
tempContainer.style.left = 0;
// 2. 克隆要导出的内容
const contentClone = employeeInfo.cloneNode(true);
// 3. 确保克隆内容的样式正确应用
contentClone.style.width = '100%';
contentClone.style.maxWidth = 'none';
// 4. 添加到临时容器并插入文档
tempContainer.appendChild(contentClone);
document.body.appendChild(tempContainer);
// 5. 等待样式应用
await new Promise(resolve => setTimeout(resolve, 500));
// 6. 使用html2canvas捕获内容
const canvas = await html2canvas(tempContainer, {
scale: 2, // 高缩放确保清晰度
useCORS: true,
logging: false,
backgroundColor: null
});
// 7. 创建PDF
const { jsPDF } = window.jspdf;
const pdf = new jsPDF('p', 'mm', 'a4');
const imgData = canvas.toDataURL('image/jpeg', 0.95);
// 计算图片尺寸以适应A4
const imgWidth = 210; // A4宽度
const imgHeight = canvas.height * imgWidth / canvas.width;
// 添加图片到PDF
pdf.addImage(imgData, 'JPEG', 0, 0, imgWidth, imgHeight);
// 8. 保存PDF
pdf.save('员工信息_' + new Date().getTime() + '.pdf');
showToast('PDF导出成功！');
} catch (error) {
console.error('PDF导出失败:', error);
showToast('导出失败: ' + error.message, true);
} finally {
// 清理临时元素
const tempContainer = document.querySelector('div[style*="top: -9999px"]');
if (tempContainer) {
document.body.removeChild(tempContainer);
}
// 恢复按钮状态
this.disabled = false;
this.innerHTML = originalText;
}
});
});
</script>
</body>
</html>