使用html2pdf生成PDF并通过Ajax发送至PHPMailer的完整指南

使用html2pdf生成PDF并通过Ajax发送至PHPMailer的完整指南

本文详细指导如何利用前端JavaScript库html2pdf生成PDF文档,并将其作为Base64编码字符串通过Ajax发送至后端PHP脚本。后端使用PHPMailer接收该Base64数据,解码后将其作为附件添加到电子邮件中并发送。本教程涵盖前端PDF生成、Ajax数据传输以及后端PHP解码与PHPMailer邮件发送的全过程。

在现代web应用中,用户经常需要将页面内容导出为pdf并进行邮件发送。直接在客户端保存pdf相对简单,但若要将生成的pdf作为附件通过邮件发送,则需要将pdf数据从前端传输到后端。本文将详细阐述如何结合html2pdf、ajax和phpmailer实现这一功能。

前端PDF生成与数据准备

前端的主要任务是利用html2pdf库将指定的HTML元素转换为PDF格式,并以Base64编码的字符串形式获取其内容。随后,通过Ajax请求将此Base64字符串连同其他邮件相关信息发送到后端。

HTML元素准备首先,确保您的HTML页面中有一个或多个需要转换为PDF的元素,例如一个具有特定ID的div。

这是要导出为PDF的内容

这里可以包含文本、图片、表格等。

html2pdf配置与PDF内容获取html2pdf库提供了output()方法,其中’datauristring’参数能够将生成的PDF内容以数据URI(Data URI)的形式返回,该URI包含了Base64编码的PDF数据。

// 获取要转换为PDF的HTML元素let page = document.getElementById('printPage');// html2pdf配置选项var pdfOptions = {    margin: [5, 0, 0, 0],    filename: 'document.pdf', // 默认文件名,实际发送时可被后端覆盖    image: { type: 'jpeg', quality: 1 },    pagebreak: { mode: ['legacy'] },    html2canvas: { scale: 3 },    jsPDF: { unit: 'mm', format: 'a4', orientation: 'portrait' }};// 监听按钮点击事件$(document).on('click', '#sendEmailBtn', async function() {    let pdfContent;    try {        // 使用await等待PDF内容生成,并获取Base64数据URI字符串        pdfContent = await html2pdf().from(page).set(pdfOptions).outputPdf('datauristring');        // 检查pdfContent是否成功获取        if (pdfContent) {            // 构建Ajax请求数据            let ajaxUrl = 'your_php_script.php'; // 替换为您的PHP脚本URL            let emailTo = $("#emailTo").val(); // 假设有输入框获取收件人            let emailSubject = $("#emailSubject").val(); // 假设有输入框获取主题            let emailMessage = $("#emailMessage").val(); // 假设有输入框获取邮件内容            // 发送Ajax请求            $.ajax({                type: "POST",                url: ajaxUrl,                data: {                    action: "sendEmail",                    emailTo: emailTo,                    emailSubject: emailSubject,                    emailMessage: emailMessage,                    pdfContent: pdfContent // 将Base64 PDF数据发送到后端                },                success: function(response) {                    console.log("邮件发送响应:", response);                    alert("邮件发送成功!");                },                error: function(jqXHR, textStatus, errorThrown) {                    console.error("邮件发送失败:", textStatus, errorThrown);                    alert("邮件发送失败!");                }            });        } else {            console.error("未能生成PDF内容。");            alert("未能生成PDF内容,请重试。");        }    } catch (error) {        console.error("生成PDF或发送邮件时发生错误:", error);        alert("操作失败,请检查控制台了解详情。");    }});

关键点: outputPdf(‘datauristring’) 方法是获取Base64编码PDF数据的核心。由于这是一个异步操作,需要使用await或.then()来确保在发送Ajax请求之前PDF内容已经生成。

后端PHP处理与邮件发送

后端PHP脚本负责接收前端发送的Base64编码PDF数据,对其进行解码,然后使用PHPMailer库将解码后的PDF作为附件发送电子邮件。

立即学习“PHP免费学习笔记(深入)”;

接收与解码PDF数据前端发送的pdfContent是一个数据URI字符串,格式通常为data:application/pdf;base64,JVBERi…。我们需要移除前缀data:application/pdf;base64,,然后对剩余的Base64字符串进行解码。

PHPMailer配置与附件发送PHPMailer是一个功能强大的PHP邮件发送库,支持SMTP、HTML邮件和附件等。

SMTPDebug = 0; // 调试输出,0为关闭,1为客户端,2为客户端和服务器        $mail->isSMTP(); // 使用SMTP发送        $mail->Host       = 'smtp.example.com'; // SMTP服务器地址        $mail->SMTPAuth   = true; // 启用SMTP认证        $mail->Username   = 'your_email@example.com'; // SMTP用户名        $mail->Password   = 'your_password'; // SMTP密码        $mail->SMTPSecure = PHPMailer::ENCRYPTION_STARTTLS; // 启用TLS加密,或者使用PHPMailer::ENCRYPTION_SMTPS        $mail->Port       = 587; // TLS端口通常是587,SSL端口通常是465        // 收件人设置        $mail->setFrom('your_email@example.com', '您的公司名称'); // 发件人        $mail->addAddress($emailTo); // 收件人        // $mail->addCC('cc@example.com'); // 抄送        // $mail->addBCC('bcc@example.com'); // 密送        // 附件        // AddStringAttachment(string $string, string $filename, string $encoding = 'base64', string $type = '', string $disposition = 'attachment')        // $decodedPdf是原始二进制数据,PHPMailer会自动将其编码为Base64用于邮件传输        $mail->AddStringAttachment($decodedPdf, "Generated_Document.pdf", "base64", "application/pdf");        // 内容设置        $mail->isHTML(true); // 设置邮件格式为HTML        $mail->Subject = $emailSubject; // 邮件主题        $mail->Body    = $emailMessage; // HTML邮件内容        $mail->AltBody = strip_tags($emailMessage); // 非HTML邮件客户端的替代内容        $mail->send();        echo json_encode(['status' => 'success', 'message' => '邮件已成功发送!']);    } catch (Exception $e) {        echo json_encode(['status' => 'error', 'message' => "邮件发送失败。Mailer Error: {$mail->ErrorInfo}"]);    }} else {    echo json_encode(['status' => 'error', 'message' => '无效的请求或缺少PDF内容。']);}?>

关键点:

substr($pdfdoc, strpos($pdfdoc, “,”) + 1):这一行代码用于精确地从数据URI中提取出纯粹的Base64编码字符串,移除了data:application/pdf;base64,这个前缀。base64_decode($pdfData):将Base64字符串解码为原始的二进制PDF内容。$mail->AddStringAttachment($decodedPdf, “Generated_Document.pdf”, “base64”, “application/pdf”):这是将PDF作为附件的关键。$decodedPdf是解码后的二进制数据,”Generated_Document.pdf”是附件的文件名,”base64″指定了PHPMailer在传输时对该二进制数据进行Base64编码,”application/pdf”指定了MIME类型。

注意事项

文件大小限制: Base64编码会使数据量增大约33%。如果生成的PDF文件非常大,可能会导致POST请求体过大,超出服务器的post_max_size或upload_max_filesize限制。您可能需要调整PHP配置或考虑将PDF先保存到服务器,然后发送文件路径作为附件。安全性:输入验证: 对所有来自前端的用户输入(如收件人邮箱、主题、邮件内容)进行严格的验证和清理,防止XSS、SQL注入或邮件头注入等攻击。文件类型验证: 虽然这里是内部生成PDF,但如果未来扩展到用户上传文件,务必验证文件类型,防止恶意文件上传。错误处理与用户反馈: 在前端和后端都应有健壮的错误处理机制。前端Ajax的error回调和后端PHPMailer的try-catch块是必不可少的,以便及时向用户提供反馈。异步操作: html2pdf的生成过程是异步的,务必使用async/await或.then()确保在PDF内容准备好之后再进行Ajax请求。PHPMailer配置: PHPMailer的SMTP配置(Host, Port, Username, Password, SMTPSecure)必须与您的邮件服务提供商(如Gmail, Outlook, 您的公司邮件服务器)的设置完全匹配。PHP文件路径: 确保PHPMailer的require路径正确,并且您的PHP脚本能够访问这些文件。

总结

通过上述步骤,您已经掌握了如何将前端html2pdf生成的PDF文档,以Base64字符串的形式通过Ajax传输至后端,并利用PHPMailer将其作为电子邮件附件发送的完整流程。这种方法提供了一种灵活且强大的解决方案,使得Web应用能够无缝地处理PDF生成和邮件发送的需求。请务必关注安全性和错误处理,以构建健壮可靠的系统。

以上就是使用html2pdf生成PDF并通过Ajax发送至PHPMailer的完整指南的详细内容,更多请关注创想鸟其它相关文章!

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至 chuangxiangniao@163.com 举报,一经查实,本站将立刻删除。
发布者:程序猿,转转请注明出处:https://www.chuangxiangniao.com/p/1508563.html

赞 (0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
如何将不规则日期时间字符串转换为DateTime对象
上一篇 2025年12月20日 04:57:17
利用正则表达式和ParseExact处理复杂日期时间字符串
下一篇 2025年12月20日 04:57:27

相关推荐

  • 并发编程中Future对象使用不当及解决方案

    并发编程中Future对象使用不当及解决方案并发编程中Future对象使用不当及解决方案并发编程中Future对象使用不当及解决方案并发编程中Future对象使用不当及解决方案

    本文针对Java并发编程中常见的set<int, Future> is not applicable to arguments (int,int)错误,深入剖析了其产生的原因,即试图将整型值直接赋值给存储Future对象的集合。文章将详细阐述Future对象的特性,并提供正确的解决方案,…

    2026年9月28日 • 用户投稿
    000
  • 苹果用户DeepSeek轻松上手操作指南

    苹果用户DeepSeek轻松上手操作指南苹果用户DeepSeek轻松上手操作指南苹果用户DeepSeek轻松上手操作指南苹果用户DeepSeek轻松上手操作指南

    苹果用户可在官网下载deepseek并手动信任安装;登录推荐用微信或邮箱;功能使用需根据需求切换模式和设置。具体步骤为:1. 访问官网下载对应ios/mac版本,前往设备管理中信任开发者证书;2. 登录时选择微信扫码或邮箱注册,团队用户可选企业账号;3. 使用前调整设置,如切换模型模式、开启历史记录…

    2026年9月28日 • 用户投稿
    100
  • DeepSeek 与 ChatGPT 有什么区别 特性对比与选型建议

    DeepSeek 与 ChatGPT 有什么区别 特性对比与选型建议DeepSeek 与 ChatGPT 有什么区别 特性对比与选型建议DeepSeek 与 ChatGPT 有什么区别 特性对比与选型建议DeepSeek 与 ChatGPT 有什么区别 特性对比与选型建议

    deepseek和chatgpt的主要区别在于训练数据、模型架构、擅长领域及应用场景。1. deepseek侧重代码生成与数学推理,适合编程及逻辑任务;2. chatgpt擅长自然语言处理与文本生成,适用于对话、写作等场景;3. 选型应根据项目核心需求决定,若重代码理解选deepseek,若重语言表…

    2026年9月27日 • 用户投稿
    000
  • 从一副牌中抽取唯一牌的正确方法(Java)

    从一副牌中抽取唯一牌的正确方法(Java)从一副牌中抽取唯一牌的正确方法(Java)从一副牌中抽取唯一牌的正确方法(Java)从一副牌中抽取唯一牌的正确方法(Java)

    本文旨在解决在Java中使用递归函数从一副牌中抽取唯一牌时出现的java.lang.StackOverflowError问题。通过分析错误原因,提供正确的代码示例,并详细解释了如何避免该错误,确保每次抽取的牌都是唯一的。本文将帮助读者理解递归的正确使用方式以及如何优化代码以提高效率。 问题分析 原始…

    2026年9月27日 • 用户投稿
    000
  • VSCode如何优化文件搜索速度 VSCode全局搜索的性能优化建议

    vscode文件搜索慢的核心原因是未合理排除无关文件及系统环境限制,解决方法是一套组合拳:1. 配置search.exclude在settings.json中排除node_modules、dist等无关文件夹;2. 确保使用.gitignore并开启search.useignorefiles;3. …

    2026年9月27日
    000
  • 【Linux/C++】Linux下C++命令行编译示例

    本文是关于c++++编程语言基础和linux系统操作基础的系列文章的第二部分。我们将详细介绍在linux环境下如何编译c++代码,并展示相关的编译示例和技巧。 文章目录 准备源代码编译实战引入目录进行编译使用-Wall、-std 参数进行编译生成库文件链接静态库生成可执行文件链接动态库生成可执行文件…

    2026年9月27日
    100
  • Gemini移动端如何节省流量 Gemini数据压缩与缓存设置指南

    Gemini移动端如何节省流量 Gemini数据压缩与缓存设置指南Gemini移动端如何节省流量 Gemini数据压缩与缓存设置指南Gemini移动端如何节省流量 Gemini数据压缩与缓存设置指南Gemini移动端如何节省流量 Gemini数据压缩与缓存设置指南

    gemini移动端节省流量的核心方法包括:1.开启应用内的数据压缩模式,选择低分辨率加载图片和视频;2.关闭自动播放功能,防止后台流量浪费;3.限制或关闭后台刷新与预加载,减少无谓的数据更新;4.定期清理缓存或设置缓存上限,避免过期数据重复下载;5.启用系统级低数据模式,限制后台流量使用;6.关闭g…

    2026年9月27日 • 用户投稿
    100
  • 设置Apache FOP字体相对路径:使用fop.xconf配置跨平台字体

    设置Apache FOP字体相对路径:使用fop.xconf配置跨平台字体设置Apache FOP字体相对路径:使用fop.xconf配置跨平台字体设置Apache FOP字体相对路径:使用fop.xconf配置跨平台字体设置Apache FOP字体相对路径:使用fop.xconf配置跨平台字体

    Apache FOP在不同操作系统下配置字体时,使用绝对路径会遇到兼容性问题。本文详细介绍如何在fop.xconf中利用标签和相对embed-url属性,灵活指定字体文件的相对路径,确保应用程序在多种环境中都能正确加载和渲染字体,避免硬编码路径,提升可移植性。 FOP字体配置的跨平台挑战 在使用ap…

    2026年9月27日 • 用户投稿
    500
  • 怎样让 AI 模型持续改进工具与豆包配合进行改进?全流程指南​

    怎样让 AI 模型持续改进工具与豆包配合进行改进?全流程指南​怎样让 AI 模型持续改进工具与豆包配合进行改进?全流程指南​怎样让 AI 模型持续改进工具与豆包配合进行改进?全流程指南​怎样让 AI 模型持续改进工具与豆包配合进行改进?全流程指南​

    要让ai模型与豆包配合更好,需通过持续反馈、调优和迭代实现。1. 明确使用场景并设定目标,记录问题并打标签以指导优化方向;2. 善用豆包反馈机制,具体描述问题并定期分析反馈记录;3. 进阶用户可结合结构化外部数据进行微调并通过a/b测试验证效果;4. 优化提示词设计,明确角色、格式和逻辑顺序,提升交…

    2026年9月27日 • 用户投稿
    000
  • 高通:95%的用户愿为搭载骁龙心片的高端手机溢价买单

    高通:95%的用户愿为搭载骁龙心片的高端手机溢价买单高通:95%的用户愿为搭载骁龙心片的高端手机溢价买单高通:95%的用户愿为搭载骁龙心片的高端手机溢价买单高通:95%的用户愿为搭载骁龙心片的高端手机溢价买单

    在骁龙峰会2025上,高通高级副总裁don mcguire表示,最新调研显示,84%的消费者认为搭载骁龙处理器的笔记本表现出色,具备强大性能;同时,95%的用户愿意为配备骁龙移动平台的高端智能手机支付更高价格。 据CNMO了解,骁龙品牌在多个市场已展现出强劲影响力。根据CyberMedia Rese…

    2026年9月27日 • 用户投稿
    000
  • 就业培训里PHP+MySQL安全开发的讲解深度

    php+mysql安全开发的讲解深度应包括:1)基础安全措施的详细讲解,2)常见攻击类型和防范方法的深入探讨,3)最佳实践和开发习惯的培养,以提升学员的技术技能和安全意识。 在就业培训中,关于PHP+MySQL安全开发的讲解深度是一个非常关键的话题。这不仅关系到学员能否掌握必要的技能,也直接影响到他…

    2026年9月27日
    000
  • Java在Windows CMD终端实现ANSI颜色输出的策略与实践

    Java在Windows CMD终端实现ANSI颜色输出的策略与实践Java在Windows CMD终端实现ANSI颜色输出的策略与实践Java在Windows CMD终端实现ANSI颜色输出的策略与实践Java在Windows CMD终端实现ANSI颜色输出的策略与实践

    本文深入探讨了Java程序在Windows CMD终端中无法正确显示ANSI颜色代码的问题,并提供了两种有效的解决方案。针对不同Java版本和需求,我们介绍了通过外部命令(如echo)代理输出的兼容性方法,以及利用Java 22+ Foreign Function & Memory API直…

    2026年9月27日 • 用户投稿
    000
  • 夸克AI搜索和普通搜索的区别_夸克新旧搜索模式对比分析

    夸克AI搜索和普通搜索的区别_夸克新旧搜索模式对比分析夸克AI搜索和普通搜索的区别_夸克新旧搜索模式对比分析夸克AI搜索和普通搜索的区别_夸克新旧搜索模式对比分析夸克AI搜索和普通搜索的区别_夸克新旧搜索模式对比分析

    AI搜索通过理解意图生成直接答案,如夸克采用“先思考后搜索”策略,整合多源信息提供结构化回答。1、与传统关键词匹配不同,AI搜索输出分点建议等归纳内容。2、支持多轮对话与上下文追溯,可连续追问并准确识别指代对象。3、集成AI写作、文件总结等功能,实现从检索到任务解决的跃迁。4、在个性化推荐中强化隐私…

    2026年9月27日 • 用户投稿
    200
  • 联想 moto razr 50 Ultra AI 元启版哥特玫瑰限定版上市

    联想 moto razr 50 Ultra AI 元启版哥特玫瑰限定版上市联想 moto razr 50 Ultra AI 元启版哥特玫瑰限定版上市联想 moto razr 50 Ultra AI 元启版哥特玫瑰限定版上市联想 moto razr 50 Ultra AI 元启版哥特玫瑰限定版上市

    9 月 5 日,摩托罗拉手机官方宣布,联想 moto razr 50 ultra ai 元启版全新潘通流行色限定版——哥特玫瑰上市!提供 16gb+1tb 一种内存组合,售价 6999 元。 联想 moto razr 50 Ultra AI 元启版 小折叠屏手机 4.0 英寸外屏,1272 × 10…

    2026年9月27日 • 用户投稿
    000
  • sublime怎么关联文件类型_Sublime Text设置特定文件扩展名的默认语法

    sublime怎么关联文件类型_Sublime Text设置特定文件扩展名的默认语法sublime怎么关联文件类型_Sublime Text设置特定文件扩展名的默认语法sublime怎么关联文件类型_Sublime Text设置特定文件扩展名的默认语法sublime怎么关联文件类型_Sublime Text设置特定文件扩展名的默认语法

    在Sublime Text中设置特定文件扩展名的默认语法:打开文件后点击右下角语法名称,选择所需模式并设为该扩展名默认;2. 可通过编辑Packages/User/Preferences.sublime-settings文件添加extensions映射,指定.log用Plain Text、.myco…

    2026年9月27日 • 用户投稿
    100
  • 豆包AI如何实现自动化部署?CI/CD流程优化方案

    豆包AI如何实现自动化部署?CI/CD流程优化方案豆包AI如何实现自动化部署?CI/CD流程优化方案豆包AI如何实现自动化部署?CI/CD流程优化方案豆包AI如何实现自动化部署?CI/CD流程优化方案

    豆包ai的自动化部署通过标准化流程和工具链整合实现,其核心是利用ci/cd机制打通开发、测试、构建、发布等环节。1. ci/cd是指持续集成与持续交付/部署,确保代码提交后自动构建、测试并部署到相应环境,提升效率并减少人为错误。2. 关键步骤包括:代码提交触发ci、自动构建镜像、运行测试、部署至目标…

    2026年9月27日 • 用户投稿
    100
  • win10服务主机本地系统占用CPU过高_Svchost.exe进程导致CPU占用率高的解决方法

    win10服务主机本地系统占用CPU过高_Svchost.exe进程导致CPU占用率高的解决方法win10服务主机本地系统占用CPU过高_Svchost.exe进程导致CPU占用率高的解决方法win10服务主机本地系统占用CPU过高_Svchost.exe进程导致CPU占用率高的解决方法win10服务主机本地系统占用CPU过高_Svchost.exe进程导致CPU占用率高的解决方法

    首先定位高CPU占用的svchost.exe进程,通过任务管理器“详细信息”选项卡排序CPU使用率,右键高占用进程选择“转到服务”以识别具体关联服务;接着禁用常引发问题的Connected User Experiences and Telemetry(DiagTrack)服务,并将Windows U…

    2026年9月27日 • 用户投稿
    200
  • 摸头杀后又发力!印度动作冒险新作《Son of Thanjai》宣传PV公开

    摸头杀后又发力!印度动作冒险新作《Son of Thanjai》宣传PV公开摸头杀后又发力!印度动作冒险新作《Son of Thanjai》宣传PV公开摸头杀后又发力!印度动作冒险新作《Son of Thanjai》宣传PV公开摸头杀后又发力!印度动作冒险新作《Son of Thanjai》宣传PV公开

    近日,印度首款3a级大作《释放阿凡达》在发布实机演示后迅速走红网络,主角行云流水般的闪避动作搭配“摸头杀”炫技场面,瞬间引爆话题,引发大量二次创作热潮。 就在热度持续攀升之际,又一款来自印度的重磅游戏登场!PS官方近日发布了《Son of Thanjai》的正式宣传视频,带来全新视觉冲击,快一起来感…

    2026年9月27日 • 用户投稿
    000
  • 解决Spring Boot与React应用在AWS部署中CORS错误的终极指南

    解决Spring Boot与React应用在AWS部署中CORS错误的终极指南解决Spring Boot与React应用在AWS部署中CORS错误的终极指南解决Spring Boot与React应用在AWS部署中CORS错误的终极指南解决Spring Boot与React应用在AWS部署中CORS错误的终极指南

    本文旨在解决在Spring Boot后端(AWS EC2)和React前端(AWS S3)部署时,即使服务器端已配置宽松的CORS策略,仍出现跨域资源共享(CORS)错误的问题。我们将深入探讨常见误区,并提供一个将CORS配置与Spring Security有效整合的专业解决方案,同时强调处理wit…

    2026年9月27日 • 用户投稿
    100
  • 在Java中实现ANSI颜色输出:解决CMD终端兼容性问题

    在Java中实现ANSI颜色输出:解决CMD终端兼容性问题在Java中实现ANSI颜色输出:解决CMD终端兼容性问题在Java中实现ANSI颜色输出:解决CMD终端兼容性问题在Java中实现ANSI颜色输出:解决CMD终端兼容性问题

    本文深入探讨了Java程序在Windows CMD终端中无法正确显示ANSI颜色代码的原因,并提供了两种有效的解决方案。首先,介绍通过外部命令cmd /c echo实现跨版本兼容的着色输出;其次,针对Java 22及更高版本,详细讲解如何利用Foreign Function & Memory…

    2026年9月27日 • 用户投稿
    000

发表回复

登录后才能评论
关注微信