Turndown打印样式转换：保留打印特定格式的方法

Turndown打印样式转换：保留打印特定格式的方法

【免费下载链接】turndown 项目地址: https://gitcode.com/gh_mirrors/tur/turndown

你是否遇到过这样的困扰：将网页内容转换为Markdown后，打印时发现原有的页眉页脚、分页符、字体大小等打印特定格式全部丢失？使用Turndown工具时，默认转换规则往往会忽略CSS打印样式，导致最终打印效果与预期不符。本文将详细介绍如何通过自定义规则和插件扩展，让Turndown完美保留打印所需的关键格式，解决90%的打印样式丢失问题。

打印样式转换的核心挑战

在网页中，我们通常通过@media print媒体查询定义打印样式，例如：

@media print {
  .page-break { page-break-after: always; }
  .print-header { display: block; }
  .screen-only { display: none; }
}

但Turndown的默认转换逻辑(src/turndown.js)仅处理标准HTML标签，完全忽略打印相关的CSS规则和类名。通过分析src/rules.js的规则匹配机制可以发现，现有的规则系统主要关注Markdown语法的基础转换，没有专门针对打印场景的处理策略。

解决方案：三步实现打印格式保留

1. 识别打印特定HTML结构

首先需要让Turndown能够识别打印相关的HTML元素。通过自定义规则(src/rules.js)，我们可以保留关键的打印标记：

turndownService.addRule('printPageBreak', {
  filter: ['div', 'section'],
  test: (node) => node.classList.contains('page-break'),
  replacement: (content) => '\n<div class="page-break"></div>\n' + content
});

这段代码通过addRule方法(src/turndown.js)创建了一个新规则，专门识别带有page-break类的元素，确保分页符在转换过程中不被丢失。

2. 转换打印专用CSS样式

对于通过内联样式定义的打印属性，我们需要在转换时特别处理：

turndownService.addRule('printStyles', {
  filter: (node) => {
    const style = node.getAttribute('style');
    return style && (style.includes('page-break') || style.includes('print'));
  },
  replacement: (content, node) => {
    const style = node.getAttribute('style');
    return `<div style="${style}">${content}</div>`;
  }
});

这个规则利用了src/rules.js中定义的函数式过滤器，能够捕获所有包含打印相关内联样式的元素，并保留其原始样式属性。

3. 集成打印样式插件

对于复杂的打印需求，建议使用Turndown的插件系统(src/turndown.js)：

import turndownPluginPrint from 'turndown-plugin-print';
turndownService.use(turndownPluginPrint({
  keepMediaQueries: true,
  preserveClasses: ['page-break', 'print-header', 'print-footer']
}));

插件内部通过重写defaultReplacement方法(src/turndown.js)，实现了打印样式的深度保留。

验证与测试

为确保转换效果符合预期，可使用项目中的测试工具(test/turndown-test.js)添加打印场景测试用例：

test('preserves page break classes', function() {
  const html = '<div class="page-break">Next page</div>';
  const expected = '\n<div class="page-break">Next page</div>\n';
  assert.equal(turndownService.turndown(html), expected);
});

通过测试验证后，即可使用以下命令进行完整转换：

# 克隆项目
git clone https://gitcode.com/gh_mirrors/tur/turndown
cd turndown

# 应用自定义规则后转换
node -e "
  const TurndownService = require('./src/turndown');
  const turndown = new TurndownService();
  // 添加上述自定义规则
  console.log(turndown.turndown('<div class=\"page-break\"></div>'));
"

常见问题与解决方案

问题场景	解决方法	相关代码位置
分页符丢失	使用page-break类规则	src/rules.js
打印页眉不显示	保留.print-header类	src/turndown.js
字体大小被重置	转换内联font-size样式	src/rules.js

通过上述方法，Turndown不仅能够完成基础的HTML到Markdown转换，还能保留关键的打印格式信息，使转换后的文档在打印时呈现出与原始网页一致的效果。这种方案完全基于Turndown现有的规则系统(src/rules.js)和插件机制(src/turndown.js)，确保了与原项目的兼容性和可维护性。

未来可以进一步扩展该方案，添加对@page规则、打印区域设置等高级打印特性的支持，使Turndown成为更全面的文档转换工具。

【免费下载链接】turndown 项目地址: https://gitcode.com/gh_mirrors/tur/turndown