从HTML创建PDF-js教程-PHP中文网

从HTML创建PDF

DDD

发布： 2025-02-16 10:22:15

原创

676人浏览过

从html创建pdf：一种无需php库的简易方法

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

从HTML创建PDF

步骤1：准备HTML内容

首先，创建包含所需内容的HTML代码。例如：

立即学习“前端免费学习笔记（深入）”；

<div id="printarea">
    <div>
        <div>关键雇佣条款</div>
        <p>所有字段均为必填项，除非不适用</p>
        <table><tbody><tr><td>
                        签发日期：
                        <br></br>所有信息均以签发日期为准
                    </td>
                </tr></tbody></table></div>
</div>

登录后复制

步骤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文件发送邮件。

不足之处：