HTML转PDF神器：html-to-pdfmake使用指南

在数字化文档处理领域，HTML到PDF的转换已成为开发者的必备技能。html-to-pdfmake是一款功能强大的开源库，能够将HTML代码轻松转换为pdfmake兼容格式，进而生成高质量的PDF文档。

核心功能特性

html-to-pdfmake支持将复杂的HTML结构智能转换为PDF文档，其主要功能包括：

• 完整HTML标签支持：包括div、p、h1-h6、table、thead、tbody、tfoot、tr、th、td、ul、ol、li、pre等块级元素
• 丰富内联元素支持：span、strong、b、em、i、s、a、sub、sup、img、svg、br、hr等
• CSS样式完美保留：颜色、字体、边框、边距、文本对齐等属性精准转换
• 跨平台兼容：支持Node.js和浏览器环境，提供统一的API接口

快速开始使用

浏览器环境使用

在HTML页面中引入必要的库文件后，通过简单的JavaScript代码即可实现HTML到PDF的转换：

<script>
  const html = `
    <div>
      <h1>示例文档</h1>
      <p>这是一个包含<strong>粗体</strong>和<em>斜体</em>文本的简单示例。</p>
  </div>
`;

const converted = htmlToPdfmake(html);
const docDefinition = { content: converted };
pdfMake.createPdf(docDefinition).download('document.pdf');
</script>

Node.js项目使用

首先安装必要的依赖包：

npm install html-to-pdfmake jsdom

然后在代码中实现转换：

const pdfMake = require('pdfmake/build/pdfmake');
const pdfFonts = require('pdfmake/build/vfs_fonts');
const htmlToPdfmake = require('html-to-pdfmake');
const jsdom = require('jsdom');
const { JSDOM } = jsdom;

pdfMake.vfs = pdfFonts;
const { window } = new JSDOM('');

const html = `
  <div>
    <h1>示例文档</h1>
    <p>这是一个包含<strong>粗体</strong>和<em>斜体</em>文本的简单示例。</p>
`;

const converted = htmlToPdfmake(html, { window });
const docDefinition = { content: converted };

pdfMake.createPdf(docDefinition).getBuffer((buffer) => {
  require('fs').writeFileSync('output.pdf', buffer);
});

配置选项详解

html-to-pdfmake提供了丰富的配置选项，以满足不同的使用需求：

默认样式配置

通过defaultStyles选项可以自定义元素的默认样式：

const options = {
  defaultStyles: {
    h1: { fontSize: 24, bold: true, marginBottom: 10 },
    p: { margin: [0, 5, 0, 10] },
    a: { color: 'purple', decoration: null }
  }
};

表格自动尺寸

启用tableAutoSize选项可以让表格根据CSS样式中的width和height属性自动调整尺寸：

const result = htmlToPdfmake(`<table>
  <tr style="height:100px">
    <td style="width:250px">高度100px / 宽度250px</td>
    <td>高度100px / 宽度自动</td>
  </tr>
</table>`, { tableAutoSize: true });

图像引用处理

使用imagesByReference选项可以按引用方式处理图像，而不是嵌入图像数据：

const result = htmlToPdfmake('<img src="https://example.com/image.jpg">', { 
  imagesByReference: true 
});

高级功能应用

自定义标签处理

通过customTag函数可以处理非标准HTML标签或修改现有标签的行为：

const options = {
  customTag: function({ element, ret, parents }) {
    if (element.nodeName === 'CUSTOM-TAG') {
      ret.text = '自定义内容';
      ret.style = ['custom-style'];
    }
    return ret;
  }
};

页面分页控制

使用CSS类名和PDFMake的pageBreakBefore功能来控制页面分页：

const docDefinition = {
  content: htmlToPdfmake(html),
  pageBreakBefore: function(node) {
    return node.style && node.style.includes('page-break-before');
  }
};

数据属性扩展

通过data-pdfmake属性可以应用PDFMake特定的属性：

<table data-pdfmake='{"widths": [100, "*", "auto"], "heights": 40}'>
  <tr>
    <td colspan="3">表格标题</td>
  </tr>
  <tr>
    <td>单元格1</td>
    <td style="text-align:center">单元格2</td>
    <td style="text-align:right">单元格3</td>
  </tr>
</table>

实际应用场景

复杂表格布局

支持表格中的跨行跨列等复杂布局：

<table>
  <thead>
    <tr>
      <th colspan="2">表头</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td rowspan="2">单元格1</td>
      <td>单元格2</td>
    </tr>
    <tr>
      <td>单元格3</td>
    </tr>
  </tbody>
</table>

样式化列表

支持各种列表样式，包括嵌套列表：

<ul style="margin-left: 20px">
  <li>第一项</li>
  <li style="color: red">第二项</li>
  <li>
    嵌套列表：
    <ol style="list-style-type: lower-alpha">
      <li>子项a</li>
      <li>子项b</li>
    </ol>
  </li>
</ul>

链接和锚点

支持外部链接和内部锚点的处理：

<a href="https://example.com">访问网站</a>
<a href="#section1">跳转到章节</a>
<h2 id="section1">章节1</h2>

项目优势特点

html-to-pdfmake具有以下显著优势：

• 简单易用：通过几行代码即可完成复杂的HTML到PDF转换
• 样式保持：能够较好地保留原始HTML的设计效果
• 高度灵活：支持自定义标签处理和样式配置
• 持续更新：作为活跃的开源项目，有持续的完善和社区支持

无论是Web开发新手还是经验丰富的专业人士，html-to-pdfmake都能让HTML转PDF变得前所未有的简单高效。立即开始使用，体验专业文档处理的新境界。