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);

典型生态项目

PDFMake

pdfmake 是html-to-pdfmake的核心依赖项目，是一个功能强大的JavaScript库，用于生成PDF文档。它支持丰富的文档结构和样式，包括文本、表格、图像等。

jsDOM

jsDOM 是一个Node.js库，用于在服务器端模拟浏览器环境。在html-to-pdfmake中，jsDOM可以帮助处理HTML内容，确保在无浏览器环境中也能正确转换HTML。

通过结合这些生态项目，开发者可以构建出功能强大且灵活的PDF生成解决方案。

html-to-pdfmake

This module permits to convert HTML to the PDFMake format

项目地址：https://gitcode.com/gh_mirrors/ht/html-to-pdfmake

登录后查看全文