从html创建pdf：一种无需php库的简易方法
许多开发者使用PHP库（如tcpdf）从HTML生成PDF，但这些库代码复杂，修改困难且效率低下。本文介绍一种更简洁的方法，利用JavaScript库jspdf和jspdf-autotable直接从HTML元素生成PDF，再通过PHP文件发送邮件，无需任何PHP PDF库。
步骤1：准备HTML内容
首先，创建包含所需内容的HTML代码。例如：
立即学习“前端免费学习笔记（深入）”；
<code class="html"><div id="printarea">
<div>
<div>关键雇佣条款</div>
<p>所有字段均为必填项，除非不适用</p>
<table><tbody><tr><td>
签发日期：
<br></br>所有信息均以签发日期为准
</td>
</tr></tbody></table></div>
</div></code>
步骤2：设置打印样式 (CSS)
使用CSS控制打印内容的格式。以下CSS代码只在打印模式下生效：
<code class="css">@media print {
body * { visibility: hidden; }
body { counter-reset: page; }
#printarea, #printarea * { visibility: visible; }
#printarea { position: absolute; left: 0; top: 0; }
.btnadd, button { display: none !important; }
}</code>
此CSS隐藏页面所有内容，只显示#printarea div。
步骤3：JavaScript打印页面
点击“打印”按钮时，JavaScript触发打印功能并动态设置PDF文件名：
<code class="javascript">function printdiv() {
const employeename = 'somename'; // 使用动态名称替换
document.title = `${employeename}.pdf`;
window.print();
}</code>
浏览器将提示打印或保存为PDF。
步骤4：使用jspdf生成PDF
为了程序化生成PDF并发送邮件，使用jspdf库。
步骤5：处理非拉丁字符和表格
为了支持非拉丁字符，需要预加载字体。将TTF字体（如droidsansfallback.ttf）转换为base64编码，并将其包含在PDF生成过程中。以下代码演示了如何加载字体并生成包含表格和非拉丁字符的PDF：
<code class="javascript">async function generateAndSendPDF() {
const doc = new window.jspdf.jsPDF();
const employeeName = 'SomeName';
const filename = `${employeeName}.pdf`;
const base64Font = await loadFontOnce(); // 加载字体函数 (见下文)
doc.addFileToVFS("DroidSansFallback.ttf", base64Font);
doc.addFont("DroidSansFallback.ttf", "DroidSansFallback", "normal");
doc.setFont("DroidSansFallback");
doc.text("员工信息1русский1书、杂志等中区别于图片的）正文，文字材料", 10, 10);
// ... 添加其他内容 ...
doc.autoTable({
// ... 表格配置 ...
});
const pdfBase64 = doc.output("datauristring").split(',')[1];
// 使用AJAX发送PDF到PHP文件
fetch("filename.php", {
// ... 发送请求 ...
});
window.open(doc.output("bloburl"), "_blank");
}
async function loadFontOnce() {
// ... 加载base64字体的函数 ...
}</code>
在filename.php文件中，添加发送邮件的代码。
结论
此方法使用JavaScript直接从HTML生成PDF，无需外部PHP库，支持表格和非拉丁字符，灵活且高效。生成的PDF可通过PHP文件发送邮件。
不足之处：
- 需要为每个HTML编写JavaScript代码。
- 需要包含较大的base64编码字体文件。
希望此方法能帮助您简化PDF生成流程！
