登录
首页 >  文章 >  前端

从HTML创建PDF

时间:2025-02-16 08:36:51 287浏览 收藏

各位小伙伴们,大家好呀!看看今天我又给各位带来了什么文章?本文标题《从HTML创建PDF》,很明显是关于文章的文章哈哈哈,其中内容主要会涉及到等等,如果能帮到你,觉得很不错的话,欢迎各位多多点评和分享!

从HTML创建PDF:一种无需PHP库的简易方法

许多开发者使用PHP库(如tcpdf)从HTML生成PDF,但这些库代码复杂,修改困难且效率低下。本文介绍一种更简洁的方法,利用JavaScript库jspdf和jspdf-autotable直接从HTML元素生成PDF,再通过PHP文件发送邮件,无需任何PHP PDF库。

从HTML创建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生成流程!

以上就是本文的全部内容了,是否有顺利帮助你解决问题?若是能给你带来学习上的帮助,请大家多多支持golang学习网!更多关于文章的相关知识,也可关注golang学习网公众号。

相关阅读
更多>
最新阅读
更多>
课程推荐
更多>