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

前言

因为要实现业务需求如下图，业务逻辑，该凭证为前端代码实现，为了简单方便实现下载为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>

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如若转载，请注明出处：http://www.pswp.cn/news/918008.shtml
繁体地址，请注明出处：http://hk.pswp.cn/news/918008.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

性能优化——GPU的影响

性能优化——GPU的影响

关闭MSAA 之前在查一个渲染问题&#xff0c;一开始是定位到了CPU在waitforFrame所以知道是GPU的问题但如何定义GPU的问题在哪里&#xff0c;就很麻烦。我一开始以为是drawcall的问题&#xff0c;因为我发现drawcall有350个但降低到30个后&#xff0c;依然情况没有好转。毕竟dra…
阅读更多...
软件需求关闭前的质量评估标准是什么

软件需求关闭前的质量评估标准是什么

在 需求关闭前&#xff0c;进行 质量评估 是确保需求被完整实现、测试充分且满足业务目标的关键步骤。以下是需求关闭前的质量评估标准&#xff0c;涵盖了功能、非功能、测试覆盖率和用户满意度等方面&#xff1a;一、功能实现的质量评估标准需求完整性&#xff1a;所有功能需求…
阅读更多...
vscode中创建python虚拟环境的方法

vscode中创建python虚拟环境的方法

文章目录框架不同python解释器vscode运行python需要的插件vscode可以改变执行python脚本的默认终端虚拟环境解释创建虚拟环境的方法python的settings.json的一些好用配置框架 python解释器->虚拟环境->vscode 不同python解释器 在一台电脑中我们可以安装多个版本的pyt…
阅读更多...
基于 ShardingSphere 的 Spring Boot 数据加密与模糊查询实现

基于 ShardingSphere 的 Spring Boot 数据加密与模糊查询实现

基于 ShardingSphere 的 Spring Boot 数据加密与模糊查询实现 在数据安全与查询便捷性并重的今天，敏感数据加密存储后如何支持灵活查询成为关键挑战。本文将聚焦ShardingSphere 在实现数据加密的同时支持模糊查询的核心能力，详细介绍基于 Spring Boot 和 ShardingSphere 的完…
阅读更多...
计算虚拟化技术

计算虚拟化技术

&#x1f9e0; 一、什么是计算虚拟化&#xff1f;&#xff08;基础认识&#xff09; ✅ 基本概念&#xff1a; 计算虚拟化&#xff08;Compute Virtualization&#xff09; 是指&#xff1a;在一台物理服务器上模拟多个“虚拟计算资源”&#xff0c;每个虚拟机看起来像是一台独…
阅读更多...
Python编程基础与实践：Python基础数据结构：列表、字典和集合

Python编程基础与实践：Python基础数据结构：列表、字典和集合

Python数据结构&#xff1a;掌握列表、字典和集合 学习目标 通过本课程的学习&#xff0c;学员将掌握Python中基本的数据结构&#xff1a;列表、字典和集合。学员将了解它们的特性、使用场景以及如何高效地使用它们来解决实际问题。 相关知识点 列表、字典和集合使用 学习…
阅读更多...
三维偏序 -- cdq 套 cdq

三维偏序 -- cdq 套 cdq

似乎题解区并没有 cdq 套 cdq 的作法&#xff0c;刚好今天讲了&#xff0c;就来写一发。 题意与记号 题目讲的很清楚了。此方法并没有树状数组好想也没有其高效&#xff0c;但能很方便扩展。下文记原序列为 ddd&#xff0c;将每个点拆分成点与询问&#xff0c;内部增加一个名为…
阅读更多...
Effective C++ 条款27: 尽量用const、enum、inline替换 #define

Effective C++ 条款27: 尽量用const、enum、inline替换 #define

Effective C 条款27&#xff1a;尽量用const、enum、inline替换#define核心思想&#xff1a;使用编译器&#xff08;const, enum, inline&#xff09;替代预处理器&#xff08;#define&#xff09;&#xff0c;让编译器进行语义检查&#xff0c;避免宏替换引发的错误和调试困难…
阅读更多...
芯谷科技--高效噪声降低解决方案压缩扩展器D5015

芯谷科技--高效噪声降低解决方案压缩扩展器D5015

在无绳电话系统中&#xff0c;噪声降低是提升通话质量的关键。 D5015 压缩扩展器&#xff0c;通过集成压缩器和扩展器&#xff0c;有效降低了传输噪声&#xff0c;同时保持了信号的完整性。D5015 采用 SOP20 和 DIP20 封装形式&#xff0c;具有低电压工作、低功耗、高集成度等特…
阅读更多...
LabVIEW车床静刚度自动测

LabVIEW车床静刚度自动测

​基于LabVIEW 平台开发车床静刚度自动测试系统&#xff0c;针对传统生产法测量中人工误差大、计算复杂、效率低等问题&#xff0c;结合误差复映规律与刚度方程&#xff0c;通过高精度硬件与软件协同&#xff0c;实现试件加工前后尺寸的在线采集、自动计算与报告生成&#xff0…
阅读更多...
汽车流通行业4S门店生存性指标：零服吸收率

汽车流通行业4S门店生存性指标：零服吸收率

我们在做汽车4S集团的商业智能BI数据分析项目中&#xff0c;对于4S店的管理&#xff0c;大家经常会提到一个分析指标&#xff0c;叫“零服吸收率”&#xff0c;这个大概是什么意思呢&#xff1f;简单来说就是4S门店一台车都没有卖出的情况下&#xff0c;光靠售后服务部分的收益…
阅读更多...
第一性原理科学计算服务器如何选择配置-CPU选择篇

第一性原理科学计算服务器如何选择配置-CPU选择篇

一、 大多数人知道的 (显性因素)核心数与线程数 (Core Count & Thread Count): 重要性&#xff1a; 核心是王道。 科学计算任务&#xff08;如仿真、建模、数据分析、机器学习训练&#xff09;绝大多数都高度并行化&#xff0c;可以同时利用多个核心进行计算。选择建议&…
阅读更多...
Java 后端 + JavaScript 前端 实现按钮级别权限控制的解决方案

Java 后端 + JavaScript 前端 实现按钮级别权限控制的解决方案

Java JavaScript 前后端协同实现按钮权限控制 在后台管理系统中&#xff0c;不同用户根据角色和数据状态应展示不同的操作按钮&#xff0c;比如编辑、删除、审批、提交等操作。本文将介绍一种通过 Java 后端生成按钮权限 JSON&#xff0c;前端通过 jQuery 解析控制按钮显示的…
阅读更多...
RAG面试内容整理-18. 向量量化与索引压缩技术（PQ, HNSW 等）

RAG面试内容整理-18. 向量量化与索引压缩技术（PQ, HNSW 等）

当知识库规模达到百万甚至数亿级文档时，向量索引的存储和查询效率成为关键瓶颈。向量量化是一类用较低比特表示近似向量的方法，大幅压缩内存占用并加速相似度计算。PQ（Product Quantization）是其中最著名的方法之一，被Faiss等库广泛实现。PQ的思想是将高维向量划分为多个子…
阅读更多...
如何显示一个 Elasticsearch 索引的字段

如何显示一个 Elasticsearch 索引的字段

作者&#xff1a;来自 Elastic JD Armada 学习如何使用 _mapping 和 _search API、子字段、合成 _source 和运行时字段来显示 Elasticsearch 索引的字段。 更多阅读&#xff1a; Elasticsearch&#xff1a;从搜索中获取选定的字段 fields Elasticsearch&#xff1a;inverted …
阅读更多...
vue3父组件把一个对象整体传入子组件，还是把一个对象的多个属性分成多个参数传入

vue3父组件把一个对象整体传入子组件，还是把一个对象的多个属性分成多个参数传入

以一个对象整体传入时&#xff0c;对象的定义&#xff1a;<template><div><p>姓名: {{ userInfo.name }}</p><p>年龄: {{ userInfo.age }}</p><p>邮箱: {{ userInfo.email }}</p></div> </template> <script s…
阅读更多...
【unitrix数间混合计算】2.1 数间混合计算模块(src/number/mod.rs)

【unitrix数间混合计算】2.1 数间混合计算模块(src/number/mod.rs)

一、源码 这段代码是一个Rust模块的声明和导出配置&#xff0c;主要用于实现"类型级数与基本类型混合计算"的功能。 //! 类型级数与基本类型混合计算// 模块声明 // -------------------------------- mod types; // 结构体定义 mod normalize; …
阅读更多...
脱机部署k3s

脱机部署k3s

离线部署 K3s 文档 1. 准备工作 操作系统准备&#xff1a;确保服务器已安装好基础操作系统&#xff08;Ubuntu、CentOS 等&#xff09;。关闭防火墙或放通端口&#xff1a;建议关闭防火墙或确保 6443、10250 等端口已开放。准备离线资源文件&#xff1a; 下载地址 k3s-airga…
阅读更多...
[失败记录] 使用HBuilderX创建的uniapp vue3项目添加tailwindcss3的完整过程

[失败记录] 使用HBuilderX创建的uniapp vue3项目添加tailwindcss3的完整过程

写在前面 放弃了。。。 1&#xff09;方案1 - 参考下面的“完整步骤” - 安装成功&#xff0c;运行成功&#xff0c;但是&#xff01;好多class不生效&#xff01; 2&#xff09;方案2 - 不安装tailwindcss&#xff0c;直接使用独立的编译好的完整css文件&#xff01; …
阅读更多...
使用Idea去git项目，发现拉取和推送都很慢的问题

使用Idea去git项目，发现拉取和推送都很慢的问题

在大多数情况下&#xff0c;用Idea去对项目进行拉取和推送是很方便的&#xff0c;对于新手来说也是非常友好的但是最近博主遇到了一个问题&#xff0c;就是我feat一个简单的类&#xff0c;去提交推送都需要很长的时间&#xff0c;甚至是20分钟&#xff0c;博主去找了很多方法。…
阅读更多...
最新文章

Copyright @ 2022~2023