HTML 转 PDFMake 使用教程

2026-01-18 09:42:15作者：裘晴惠Vivianne

项目介绍

html-to-pdfmake 是一个开源项目，旨在将HTML代码转换为PDFMake可用的格式。PDFMake是一个强大的JavaScript库，用于生成PDF文档。通过使用html-to-pdfmake，开发者可以轻松地将HTML内容转换为PDFMake的语法，从而在PDF文档中呈现复杂的HTML结构和样式。

项目快速启动

安装

首先，你需要通过npm或yarn安装html-to-pdfmake：

npm install html-to-pdfmake

或

yarn add html-to-pdfmake

使用示例

以下是一个简单的使用示例，展示了如何将HTML代码转换为PDFMake格式并生成PDF文档：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>HTML to PDFMake</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.68/pdfmake.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.68/vfs_fonts.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/html-to-pdfmake/dist/html-to-pdfmake.min.js"></script>
</head>
<body>
    <div id="template">
        <h1>我的标题</h1>
        <p>这是一个包含<strong>加粗</strong>、<em>斜体</em>和<u>下划线</u>的句子，最后还有一个<a href="https://example.com">链接</a>。</p>
    </div>
    <script>
        const html = document.getElementById('template').innerHTML;
        const pdfMakeContent = htmlToPdfMake(html);
        pdfMake.createPdf(pdfMakeContent).download('document.pdf');
    </script>
</body>
</html>

应用案例和最佳实践

应用案例

动态生成PDF报告：在Web应用中，可以使用html-to-pdfmake将动态生成的HTML报告转换为PDF格式，方便用户下载和打印。
复杂表格生成：通过HTML和CSS设计的复杂表格可以轻松转换为PDFMake格式，确保在PDF文档中呈现一致的样式和布局。

最佳实践

手动转换CSS：虽然html-to-pdfmake可以处理大部分HTML内容，但某些CSS样式可能需要手动转换为PDFMake的语法。
使用jsDOM：在Node.js环境中，可以使用jsDOM来模拟浏览器环境，确保HTML转换的准确性。

import htmlToPdfMake from 'html-to-pdfmake';
import { JSDOM } from 'jsdom';

const html = '<div><h1>我的标题</h1><p>这是一个句子。</p></div>';
const pdfMakeContent = htmlToPdfMake(html, new JSDOM().window);