HTML转PDF神器：html-to-pdfmake使用指南
项目地址: https://gitcode.com/gh_mirrors/ht/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变得前所未有的简单高效。立即开始使用，体验专业文档处理的新境界。
创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
