利用实时预览精确检视Markdown并导出完美PDF文档

在没有可视化预览的情况下直接导出PDF，往往意味着漫长的试错。修改了一处表格宽度，点击导出并打开外部阅读器，却发现某个章节标题被孤零零地留在了页面底部。对每个段落都重复这种繁琐的循环，会极大消耗工作热情。

md2pdf通过即时双栏联动预览彻底解决了这一痛点。无论您是打字输入、粘贴文字还是导入文档，右侧预览窗都会立即呈现应用了打印CSS的真实排版效果。您在屏幕上看到的字体、间距与边距，与最终生成的纸质PDF完全一致。

本指南将深入探讨实时预览引擎的运作逻辑、DOMPurify安全过滤机制以及打印前排版核查技巧。关于在线编辑的实用习惯，可参阅Markdown粘贴与即时编辑转换指南。

Why live preview matters for print-bound documents

普通网页浏览器与PDF打印引擎对CSS排版规则的解释存在本质差异。网页可以无限纵向滚动，但纸质文档受限于严格的物理分页：

• 强制分页规则: 表格、插图和长代码块必须妥善适应固定的纸张高度，不能跨页被腰斩。
• 字体层级与解析度: 在300 DPI的打印标准下，正文与标题的比例需保持高度清晰与协调。
• 物理边距边界: 任何超出页面边距的内容都会被打印机直接裁剪，无法通过滚动条查看。

具备实时打印样式仿真的预览功能，能让您在调用系统打印面板前，提前发现并修正一切排版瑕疵。

How the client-side preview pipeline renders Markdown

md2pdf的纯前端排版管线能在数毫秒内将Markdown文本转换为符合打印规范的DOM节点：

const rawHtml = markdownParser.render(markdownSource);
const cleanHtml = DOMPurify.sanitize(rawHtml, sanitizeConfig);
previewElement.innerHTML = cleanHtml;
applyHeadingAnchors(previewElement);

内置解析器全面遵循CommonMark与GitHub-Flavored Markdown（GFM）标准，完美支持删除线、自动链接识别、嵌套任务清单以及语法高亮代码块。

HTML sanitization and safety filters

当您粘贴来自第三方未受信任的Markdown或公共开源项目文档时，安全性至关重要。由于Markdown原生允许混写HTML代码，恶意攻击者可能会注入跨站脚本（XSS）。

md2pdf在客户端执行严格的DOMPurify安全清洗策略：

• 剔除危险标签: 彻底剥离并销毁<script>、<iframe>、<object>及<form>等敏感节点。
• 清除事件属性: 自动过滤onclick、onload等所有JavaScript内联事件。
• 校验协议前缀: 坚决拦截以javascript:或data:text/html开头的危险超链接。
• 保留安全排版标签: 仅允许<b>、<code>、<table>、<img>等对页面展示有益的格式标签。

所有安全净化流程都在您的浏览器本地完成，随后才挂载至预览视图中。

Previewing print themes and theme transitions

md2pdf内置了Clean、Business、Academic与Dark四款经典打印主题。点击顶部工具栏切换，预览区域的CSS类名便会即时响应：

• Clean: 采用现代系统无衬线字体，版面清晰干练。
• Business: 强化章节边框与区块分割，专为严谨的技术文档而设计。
• Academic: 经典衬线体布局，段落紧凑，契合论文与学术报告规范。
• Dark: 屏幕显示时为护眼深色模式，打印时会自动翻转为省墨白底配色。

若需详细比对各主题的字号与排版细则，请阅读md2pdf打印主题深度评测。

Differences between screen preview and print output

尽管预览已极力贴合真实纸张，但屏幕呈现与纸面打印依然存在几点物理差异：

• 视口拉伸差异: 预览区域会随浏览器窗口尺寸自适应缩放，而打印机始终锁定在A4或Letter等固定纸型。
• 分页断点模拟: 预览视图呈现为连续滚动的纸张感，打印引擎则会严格执行CSS的break-inside: avoid进行物理截断。
• 色彩打印还原: 屏幕上的高饱和RGB色彩在转为打印机油墨或碳粉时，色调会略微加深。

Diagnosing preview rendering glitches

• 预览视图停止刷新: 检查Markdown中是否存在未闭合的HTML标签或海量超长Base64图片字符串。
• 表格右侧溢出裁剪: 多列表格若超出边界，请参考Markdown表格PDF打印适配指南调整列宽。
• 图片无法显示: 请确认使用了公网HTTPS图床绝对链接，或使用GitHub README导入工具自动定位仓库相对资源。

即时预览，所见即所得。欢迎前往md2pdf体验专业的文档打印工具。