HTML转PDFMake完整指南：从基础到高级应用-优快云博客

HTML转PDFMake完整指南：从基础到高级应用

【免费下载链接】html-to-pdfmake This module permits to convert HTML to the PDFMake format 项目地址: https://gitcode.com/gh_mirrors/ht/html-to-pdfmake

项目概述

html-to-pdfmake是一个功能强大的JavaScript库，专门用于将HTML代码转换为PDFMake兼容的格式。该项目基于JavaScript开发，支持Node.js环境和浏览器端使用，为开发者提供了从网页内容生成专业PDF文档的完整解决方案。

核心功能特性

智能HTML解析

自动识别并转换各种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样式处理

该库支持处理多种CSS属性，确保HTML样式的准确转换：

CSS属性	支持程度
background-color	良好支持
border	包括单独边框设置
color	良好支持，包含透明度
font-family	基础支持
font-style	支持italic
font-weight	支持bold
height	表格和图像的高度设置
width	表格和图像的宽度设置
margin	包括单独边距设置
text-align	良好支持
text-decoration	支持underline、line-through
text-indent	基础支持
white-space	支持nowrap、pre、break-spaces
line-height	基础支持
list-style-type	良好支持

快速入门

环境安装

npm install html-to-pdfmake

浏览器端使用

<script src="https://cdn.jsdelivr.net/npm/pdfmake@latest/build/pdfmake.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/pdfmake@latest/build/vfs_fonts.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/html-to-pdfmake/browser.js"></script>

<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环境使用

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>
</div>
`;

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

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

高级配置选项

默认样式定制

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

const converted = htmlToPdfmake(html, options);

表格自动尺寸

启用表格自动尺寸计算，基于CSS样式中的宽度和高度属性：

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

图片引用处理

对于浏览器环境，支持通过引用方式处理图片：

const html = '<img src="https://example.com/image.jpg">';
const result = htmlToPdfmake(html, { imagesByReference: true });
// 返回结果包含 { content, images } 两个对象

自定义标签处理

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

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

实用示例

复杂表格布局

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

高级功能

数据属性扩展

使用data-pdfmake属性应用PDFMake特定属性：

<!-- 自定义表格属性 -->
<table data-pdfmake='{"widths": [100, "*", "auto"], "heights": 40}'>
  <tr>
    <td>固定宽度</td>
    <td>填充空间</td>
    <td>自动宽度</td>
  </tr>
</table>

页面分页控制

通过CSS类控制页面分页：

const html = `
  <div>
    <h1>第一页</h1>
    <h1 class="page-break">第二页</h1>
  </div>
`;

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

性能优化

空白处理

启用removeExtraBlanks选项移除PDF中不需要的空白行：

htmlToPdfmake(html, { removeExtraBlanks: true })

样式忽略

指定需要忽略的CSS属性：

htmlToPdfmake(html, { ignoreStyles: ['font-family'] })

项目优势

完全免费开源 基于MIT许可证，开发者可以自由使用和修改

持续技术更新 项目保持活跃开发，定期发布新版本

跨平台兼容 支持Node.js和浏览器环境，适应不同应用场景

丰富的文档支持 提供详细的API文档和使用示例

企业级稳定性能 经过充分测试，适合生产环境使用

总结

html-to-pdfmake为开发者提供了一个强大而灵活的HTML到PDF转换解决方案。无论您需要简单的文档转换，还是复杂的企业级应用，这个库都能满足您的需求。通过简单的配置和丰富的选项，您可以轻松实现专业PDF文档的生成需求。

【免费下载链接】html-to-pdfmake This module permits to convert HTML to the PDFMake format 项目地址: https://gitcode.com/gh_mirrors/ht/html-to-pdfmake

创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考