从html创建pdf：一种无需php库的简易方法
许多开发者使用PHP库（如tcpdf）从HTML生成PDF，但这些库代码复杂，修改困难且效率低下。本文介绍一种更简洁的方法，利用JavaScript库jspdf和jspdf-autotable直接从HTML元素生成PDF，再通过PHP文件发送邮件，无需任何PHP PDF库。
步骤1：准备HTML内容
首先，创建包含所需内容的HTML代码。例如：
立即学习“前端免费学习笔记（深入）”；
关键雇佣条款所有字段均为必填项，除非不适用
签发日期：
所有信息均以签发日期为准
步骤2：设置打印样式 (CSS)
使用CSS控制打印内容的格式。以下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; }}
此CSS隐藏页面所有内容，只显示#printarea div。
步骤3：JavaScript打印页面
点击“打印”按钮时，JavaScript触发打印功能并动态设置PDF文件名：
function printdiv() { const employeename = 'somename'; // 使用动态名称替换 document.title = `${employeename}.pdf`; window.print();}
浏览器将提示打印或保存为PDF。
步骤4：使用jspdf生成PDF
为了程序化生成PDF并发送邮件，使用jspdf库。
步骤5：处理非拉丁字符和表格
为了支持非拉丁字符，需要预加载字体。将TTF字体（如droidsansfallback.ttf）转换为base64编码，并将其包含在PDF生成过程中。以下代码演示了如何加载字体并生成包含表格和非拉丁字符的PDF：
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字体的函数 ...}
在filename.php文件中，添加发送邮件的代码。
结论
此方法使用JavaScript直接从HTML生成PDF，无需外部PHP库，支持表格和非拉丁字符，灵活且高效。生成的PDF可通过PHP文件发送邮件。
不足之处：
需要为每个HTML编写JavaScript代码。需要包含较大的base64编码字体文件。
希望此方法能帮助您简化PDF生成流程！
以上就是从HTML创建PDF的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1501499.html
微信扫一扫 
支付宝扫一扫 
