如何用html做网站 如何用html生成pdf

本教程详细介绍了如何利用JavaScript库html2pdf在客户端生成PDF文档，并以Base64编码字符串的形式通过Ajax异步发送至服务器。在服务器端，我们将使用PHP接收到的Base64数据，除URI之外进行解码，最终通过PHPMailer库生成的PDF作为附件发送电子邮件。本文将介绍从PDF生成、数据传输到处理及其邮件发送的全过程，并提供完整的代码示例和注意事项。 概述与准备工作

在web应用中，有时我们需要将用户界面上的内容转换为pdf文档，并将其通过邮件发送。直接在客户端生成发送邮件是不安全的，也无法实现。因此，常见的做法是：在客户端生成pdf的二进制数据（通常是base64编码），通过ajax发送到服务器，由服务器端脚本（如php）处理并发送邮件。

本教程将以下使用关键技术栈：一： html2pdf.js（基于html2canvas和jsPDF）用于将HTML内容转换为PDF，jQuery或原有的XMLHttpRequest进行Ajax通信。其中：PHP处理数据，PHPMailer库发送电子邮件。

在开始已，请确保您的项目引入html2pdf.js和jQuery（如果使用），并且服务器端已安装PHPMailer。2. 客户端：生成PDF并以Base64字符串形式传输

在客户端，我们首先使用html2pdf.js将指定的HTML内容元素转换为PDF。关键在于不直接保存PDF，而是将其输出为Base64编码转换的URI字符串。2.1 HTML结构准备

确保你的HTML页面中有一个包含需要为PDF的内容元素，例如：

立即学习“PHP免费学习笔记（深入）”；lt；div id=quot；printPagequot；gt； lt；h1gt；这是一个 PDFlt；/h1gt；lt；pgt；这是需要转换为 PDF 的内容。lt；/pgt； lt；ulgt； lt；ligt；列表项 1lt；/ligt； lt；ligt；列表项 2lt；/ligt； lt；/ulgt；@@##@@lt；/divgt 标题；lt；按钮id=quot；sendPdfBtnquot；gt；生成并发送PDFlt；/buttongt；登录后复制2.2 JavaScript代码：生成Base64 PDF并发送Ajax请求

html2pdf.js提供了一个output()方法，可以指定输出格式。我们使用datauristring格式来获取PDF的Base64编码字符串。

// 获取转换为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 // html2canvas 渲染比例 }， jsPDF： { unit： 'mm'， // 单位格式： 'a4'， // 纸张格式方向： 'portrait' // 方向：纵向 }}；// 监听点击按钮事件$(document).on('click'， '#sendPdfBtn'， async function() { let pdfContent； try { // 使用await等待PDF生成为 datauristring pdfContent = wait html2pdf().from(page).set(pdfOptions).outputPdf('datauristring')； // 或者使用 .then() 回调方式 // wait html2pdf().from(page).set(pdfOptions).outputPdf('datauristring').then(function(pdfAsString) { // pdfContent = pdfAsString； // })； // 准备 Ajax请求数据 let ajaxUrl = 'your_php_mailer_script.php'； // 替换为你的 PHP 脚本 URL let transaction = 'someTransactionType'； // 示例数据 let transactionId = '12345'； // 示例数据 $.ajax({ type： quot；POSTquot；， url： ajaxUrl， data： { action： quot；sendEmailquot；， // 动作示例 transaction： transaction， transactionId： transactionId， emailTo： $(quot；#emailToquot；).val() || quot；收件人@

example.comquot；， // 接收者邮箱 emailCc： $(quot；#emailCcquot；).val()， // 抄送 emailBcc： $(quot；#emailBccquot；).val()， // 密送 emailSubject： $(quot；#emailSubjectquot；).val() || quot；来自网站的PDF报告quot；， // 邮件主题emailMessage： $(quot；#emailMessagequot；).val() || quot；请查收附件中的PDF文档。quot；， // 邮件内容 pdfContent： pdfContent // 核心：Base64编码的PDF内容 }， success： function(data) { console.log(quot；邮件发送响应：quot；， data)；alert(quot；邮件发送！quot；)； }， error： function(xhr， status， error) { console.error(quot；Ajax请求失败：quot；， status， error)； alert(quot；邮件发送失败，请查看控制台了解详情。quot；)； } })； } catch (error) { console.error(quot；PDF生成或发送过程中发生错误：quot；， error)；alert(quot；PDF生成或发送失败。quot；)； }})；登录后复制

代码解释：html2pdf().from(page).set(pdfOptions).outputPdf('datauristring')：这是核心部分。它指示 html2pdf 从页面元素生成PDF，应用 pdfOptions 配置，并将结果输出为 datauristring。datauristring格式通常是data：application/pdf；base64，JVBERi...，其中JVBERi...是PDF的Base64编码内容。服务器端需要处理这远端。await关键字用于等待异步的html2pdf操作完成。要使用await，你的函数需要被声明为async。$.ajax()用于wPOST请求，将pdfContent作为数据的一部分发送到服务器。3. 服务器端：处理Base64 PDF数据并使用PHPMailer发送邮件

在服务器端（PHP脚本），我们将接收继承过来的Base64字符串，进行解密，然后使用PHPMailer将其附件作为发送。

3.1 PHP代码：接收、解码并发送maillt；?php//引入PHPMailer相关的类文件use PHPMailer\PHPMailer\PHPMailer；use PHPMailer\PHPMailer\Exception；require 'path/to/PHPMailer/src/Exception.php'；require 'path/to/PHPMailer/src/PHPMailer.php'；require 'path/to/PHPMailer/src/SMTP.php'；//设置响应头，防止CORS问题或确保JSON响应header('Content-Type： application/json')；//检查是否是POST请求 if ($_SERVER['REQUEST_METHOD'] !== 'POST') { echo json_encode(['status' =gt； 'error'， 'message' =gt； '请求方法无效。'])； exit；}// 获取前端发送的 PDF 内容及其他邮件信息 $pdfdoc = $_POST['pdfContent'] ?? ''；$emailTo = $_POST['emailTo'] ?? ''；$emailCc = $_POST['emailCc'] ?? ''；$emailBcc = $_POST['emailBcc'] ?? ''；$emailSubject = $_POST['emailSubject'] ?? '邮件主题未设置'；$emailMessage = $_POST['emailMessage'] ?? '邮件内容为空'；//验证PDF内容是否存在if (empty($pdfdoc)) { echo json_encode(['status' =gt； 'error'， 'message' =gt； 'PDF内容丢失。'])； exit；}//提取Base64编码的PDF数据// 'data：application/pdf；base64，'这个需要被删除$pdfData = substr($pdfdoc， strpos($pdfdoc， '，') 1)； // 从逗号后面开始截取//对Base64数据进行解码$decodedPdf = base64_decode($pdfData)成功；//检查解码是否if ($decodedPdf === false) { echo json_encode(['status' =gt； 'error'， 'message' =gt； '解码PDF内容失败。'])； exit；}// PHPMailer实例$mail = new PHPMailer(true)； // true 启用例外 { // 服务器设置（根据您的 SMTP 服务商配置） $mail-gt；SMTPDebug = 0； // 0 = 关闭（用于生产）， 1 = 客户端消息， 2 = 客户端和服务器

er messages $mail-gt；isSMTP()； // 使用SMTP $mail-gt；Host = 'smtp.yourdomain.com'； // SMTP 服务器地址 $mail-gt；SMTPAuth = true； // 启用 SMTP 认证 $mail-gt；Username = 'your_email@yourdomain.com'； // SMTP 用户名 $mail-gt；Password = 'your_email_password'； // SMTP 密码 $mail-gt；SMTPSecure = PHPMailer：：ENCRYPTION_STARTTLS； // 启用 TLS 加密，或者 PHPMailer：：ENCRYPTION_SMTPS for SSL $mail-gt；Port = 587； // TLS 端口通常为 587，SSL 端口通常为 465 // 规范 $mail-gt；setFrom('sender@yourdomain.com'， 'Your Company Name')； // 发件人邮箱和名称$mail-gt；addAddress($emailTo)； // 惯例邮箱 if (!empty($emailCc)) { $mail-gt；addCC($emailCc)； // 抄送 } if (!empty($emailBcc)) { $mail-gt；addBCC($emailBcc)； // 密送 } // 附件 // AddStringAttachment(string $string， string $filename， string $encoding = 'base64'， string $type = ''， string $disposition = 'attachment') // 这里我们建立的是原始的二进制PDF数据，所以编码类型是 'base64' （之前是base64编码的），因为MIME类型是 'application/pdf' $mail-gt；AddStringAttachment($decodedPdf， quot；GeneratedDocument.pdfquot；， quot；base64quot；， quot；application/pdfquot；)； // 内容$mail-gt；isHTML(true)； // 邮件内容为HTML格式 $mail-gt；Subject = $emailSubject； // 邮件主题 $mail-gt；Body = nl2br(htmlspecialchars($emailMessage))； // 邮件HTML内容，nl2br保留换行，htmlspecialchars防止XSS $mail-gt；AltBody = strip_tags($emailMessage)； // 纯文本内容，用于不支持HTML的邮件客户端 $mail-gt；send()； echo json_encode(['

status' =gt； 'success'， 'message' =gt； '消息已发送。'])；} catch (Exception $e) { echo json_encode(['status' =gt； 'error'， 'message' =gt； quot；消息无法发送。邮件程序错误： {$mail-gt；ErrorInfo}quot；])；}?gt；登录后复制

解释代码：PHPMailer引入：确保要求语句指向你的PHPMailer库的正确路径。提取数据：$_POST['pdfContent']获取前置发送的Base64字符串。substr($pdfdoc，strpos($pdfdoc，'，')1)：这是关键一步。datauristring格式包含一个远端（例如data：application/pdf；base64，），我们需要用strpos找到漂亮的位置，然后用substr 从逗号之后开始截取，从而得到纯粹的Base64编码数据。base64_decode($pdfData)：将纯粹的Base64编码数据解码回原始的二进制PDF数据。$mail-gt；AddStringAttachment(...)：添加这是PHPMailer中用于字符串作为附件的方法。第一个参数 $decodedPdf 是解码后的二进制PDF数据。第二个参数 "GenerateDocument.pdf" 是附件的文件名。第三个参数"base64" 表示附件的编码方式（我们格式化的是解码后的数据，PHPMailer内部会根据这个参数进行处理，这里指明原始数据是Base64编码的）。第四个参数 "application/pdf" 是附件的MIME类型，这非常重要，它告诉邮件客户端是一个PDF文件。SMTP配置：替换主机，用户名，密码，端口， SMTPSecure 为你的SMTP服务器的实际配置。错误处理： try...catch用于捕获PHPMailer可能引发的异常，并返回详细的错误信息。4. 注意事项与总结文件大小限制：通过Ajax发送Base64编码的数据会显着增加数据量（Base64编码使数据量增加约33）。对于非常大的PDF文件，这可能会导致HTTP请求体过大，超出服务器或Web服务器（如Nginx，Apache）的请求体大小限制。你可能需要调整服务器配置（例如PHP的post_max_size和upload_max_filesize，以及Web服务器的）安全性：始终在服务器端验证所有接收到的输入数据，包括邮件地址、主题和内容，以防止注入攻击（如XSS）。不要直接暴露你的SMTP在客户端代码中。PHPMailer配置应完全在服务器端进行。对考虑生成的PDF内容进行服务器端验证或消毒，如果内容来源于用户。异步操作：html2pdf的生成过程是异步的。确保你在发送Ajax请求之前，PDF内容已经完全生成并分配给pdf内容变量。

使用 wait 或 .then() 回调是处理异步操作的正确方式。MIME 类型：在 AddStringAttachment 中正确指定 application/pdf MIME 类型关键，它能确保邮件客户端正确识别并显示附件。调试：在开发阶段，将 PHPMailer 的 SMTPDebug 设置为 1 或 2 可以帮助你 SMTP 查看通信过程，从而诊断连接或认证问题。在生产环境中，请务必将其设置为 0。PHPMailer 路径：确认 require语句中PHPMailer库的路径是正确的。

通过以上步骤，你就可以成功地在客户端生成PDF，并通过Ajax将其发送到服务器，再由PHPMailer将其附件作为电子邮件发送。这种方法考虑了客户端生成生成PDF的灵活和服务器端发送邮件的可靠性与安全性。

以上就是使用html2pdf生成PDF并通过Ajax发送至PHPMailer的完整教程的详细内容，更多请关注乐哥常识网其他相关文章！