当前位置：首页 > news >正文

前端页面直接生成PDF下载文件

news 2025/8/8 7:39:38

前言

因为要实现业务需求如下图，业务逻辑，该凭证为前端代码实现，为了简单方便实现下载为pdf的需求。
在这里插入图片描述

一、怎么在前端直接生成PDF？

需求描述：浏览器打开的这个页面，点击下载，把当前弹框页面的进行转换为pdf

二、具体实现代码如下：

代码如下：

代码如下（示例）：

<!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. 创建PDFconst { jsPDF } = window.jspdf;const pdf = new jsPDF('p', 'mm', 'a4');const imgData = canvas.toDataURL('image/jpeg', 0.95);// 计算图片尺寸以适应A4const imgWidth = 210; // A4宽度const imgHeight = canvas.height * imgWidth / canvas.width;// 添加图片到PDFpdf.addImage(imgData, 'JPEG', 0, 0, imgWidth, imgHeight);// 8. 保存PDFpdf.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>