dw制作网站模板,贵阳市建设局网站,英文二手汽车网站建设,win10如何部署自己做的网站前言
因为要实现业务需求如下图#xff0c;业务逻辑#xff0c;该凭证为前端代码实现#xff0c;为了简单方便实现下载为pdf的需求。
一、怎么在前端直接生成PDF#xff1f;
需求描述#xff1a;浏览器打开的这个页面#xff0c;点击下载#xff0c;把当前弹框页面的…前言
因为要实现业务需求如下图业务逻辑该凭证为前端代码实现为了简单方便实现下载为pdf的需求。
一、怎么在前端直接生成PDF
需求描述浏览器打开的这个页面点击下载把当前弹框页面的进行转换为pdf二、具体实现代码如下
代码如下 代码如下示例 !DOCTYPE html
html langzh-CN
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0title可靠的弹框内容转PDF/titlescript srchttps://cdn.tailwindcss.com/scriptlink hrefhttps://cdn.jsdelivr.net/npm/font-awesome4.7.0/css/font-awesome.min.css relstylesheet!-- 引入必要的PDF生成库 --script srchttps://html2canvas.hertzen.com/dist/html2canvas.min.js/scriptscript srchttps://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.1/jspdf.umd.min.js/scriptscripttailwind.config {theme: {extend: {colors: {primary: #4F46E5,secondary: #10B981,},}}}/scriptstyle typetext/tailwindcsslayer 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 classbg-gray-50 min-h-screen p-4 md:p-8div classmax-w-4xl mx-autoh1 classtext-2xl md:text-3xl font-bold text-gray-800 mb-8 text-center员工信息管理系统/h1button idopenModal classbg-primary hover:bg-primary/90 text-white font-medium py-2 px-6 rounded-lg transition-all duration-300 mx-auto blocki classfa fa-user-circle mr-2/i查看员工信息/button/div!-- 员工信息弹框 --div idemployeeModal classmodal-backdropdiv classmodal-contentdiv classp-6 border-b border-gray-200h2 classtext-xl font-bold text-gray-800员工详细信息/h2/div!-- 要导出为PDF的内容 --div idemployeeInfo classp-6div classflex flex-col md:flex-row gap-6 items-center mb-8div classw-24 h-24 rounded-full bg-primary/10 flex items-center justify-centeri classfa fa-user text-4xl text-primary/i/divdivh3 classtext-2xl font-bold text-gray-800张三/h3p classtext-gray-600软件工程师/p/div/divdiv classgrid grid-cols-1 md:grid-cols-2 gap-6 mb-8divh4 classtext-sm font-medium text-gray-500 mb-1员工编号/h4p classtext-gray-800EMP2023001/p/divdivh4 classtext-sm font-medium text-gray-500 mb-1入职日期/h4p classtext-gray-8002023年1月15日/p/divdivh4 classtext-sm font-medium text-gray-500 mb-1联系电话/h4p classtext-gray-80013800138000/p/divdivh4 classtext-sm font-medium text-gray-500 mb-1电子邮箱/h4p classtext-gray-800zhangsancompany.com/p/div/divdiv classmb-8h4 classtext-base font-semibold text-gray-800 mb-3教育背景/h4div classpl-4 border-l-2 border-primary space-y-4divp classfont-medium text-gray-800计算机科学与技术 - 本科/pp classtext-sm text-gray-600北京大学 | 2016-2020/p/divdivp classfont-medium text-gray-800软件工程 - 硕士/pp classtext-sm text-gray-600清华大学 | 2020-2022/p/div/div/divdivh4 classtext-base font-semibold text-gray-800 mb-3工作技能/h4div classflex flex-wrap gap-2span classpx-3 py-1 bg-blue-100 text-blue-800 rounded-full text-smJava/spanspan classpx-3 py-1 bg-blue-100 text-blue-800 rounded-full text-smSpring Boot/spanspan classpx-3 py-1 bg-blue-100 text-blue-800 rounded-full text-smMySQL/spanspan classpx-3 py-1 bg-blue-100 text-blue-800 rounded-full text-smRedis/spanspan classpx-3 py-1 bg-blue-100 text-blue-800 rounded-full text-sm微服务/span/div/div/divdiv classp-6 border-t border-gray-200 flex justify-end gap-4button idcloseModal classpx-5 py-2 border border-gray-300 rounded-lg text-gray-700 hover:bg-gray-50 transition-colors关闭/buttonbutton idexportPdf classpx-5 py-2 bg-secondary text-white rounded-lg hover:bg-secondary/90 transition-colorsi classfa fa-download mr-2/i导出PDF/button/div/div/div!-- 提示消息 --div idtoast classtoastspan idtoastMessage/span/divscript// 等待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 classfa 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
