网页转Markdown再转PDF：从内容抓取到文档输出的完整流程-开发者社区

1. 先想清楚：网页转md再转pdf，到底解决什么问题

你有没有过这种经历：刷到一篇写得特别好的教程，顺手点了收藏，然后它就永远躺在了收藏夹里吃灰。等哪天真想用的时候，要么原网页被删了，要么链接打不开，要么内容改得面目全非。又或者，你想把一份技术文档发给同事、打印出来看、放进自己的知识库做二次整理，但网页那密密麻麻的侧边栏、弹窗广告、页脚推荐，怎么弄都觉得不对味。

所以“网页 → Markdown → PDF”这条链路，本质上解决的是三件事：永久占有内容、清洗冗余信息、输出标准化文档。网页是别人的，随时可能消失；md和pdf是你自己的，存到本地想怎么处理都行。

先说个容易被忽略的前提：为什么要中间加一道Markdown，而不是网页直接打印成pdf？

直接打印网页，出来的东西五花八门。页面宽度会截断代码块，背景色和文字颜色打印出来要么看不清要么浪费墨，侧边栏导航和广告也会混进打印结果里。更麻烦的是，网页打印是“所见即所得”，但网页的“所见”本身就不可控。而Markdown是纯文本结构，它剥离了样式，只保留内容和层级，你可以用自己的CSS重新定义排版，想怎么渲染就怎么渲染。

我自己的使用场景大概有三类，你可以对照一下：

技术文章存档：遇到讲得清楚的源码解析、算法拆解、框架教程，立刻抓成md，按主题归类放进本地仓库，后续用Obsidian或Logseq打开，还能跟自己的笔记双向链接。
资料分发：把采集到的教程整理成pdf，发给团队做内部培训材料，或者放到共享盘里，别人不用装任何工具，双击就能打开看。
离线阅读与批注：出门在路上、在飞机上，网络不好，但pdf可以在任何设备上打开，不少阅读器还支持手写批注。

所以这篇文章不是只教你装一个工具，而是把整条链路的所有环节都拆开讲清楚，包括工具怎么选、参数怎么配、遇到坑怎么跳。看完之后，你对“把网页变成自己资产”这件事，不再有任何盲区。

2. 网页到 Markdown：最省事的抓取方案

2.1 工具选型：markdownload 为什么是首选

市面上的网页转Markdown工具不少，浏览器扩展、在线服务、命令行工具都有，但真正常用且稳定的一定不多。我前后试过十几种，最后长期留在浏览器里的只有一个：markdownload - markdown web clipper。

为什么是它？几个硬指标：

开源免费，代码在GitHub上公开，不担心后门或数据收集。
支持Chrome和Firefox系内核浏览器，Edge、Chrome、Brave都能用。
抓取规则基于Readability算法，能自动去除导航、侧边栏、广告等噪音，保留正文主体。
可自定义模板，输出文件能带上来源URL、抓取日期、标签等元信息。
图片可配置为下载到本地，也可以保留远程链接，主动权在你手里。

相比之下，很多在线转换网站虽然免安装，但需要把整段HTML粘贴上去，碰上动态渲染的页面就抓瞎，而且你也不知道平台拿你的内容做了什么。命令行工具如Pandoc也能做HTML转Markdown，但前置依赖太多，对普通用户不友好。

所以我的建议很简单：浏览器装markdownload解决90%的需求，碰到抓不了的页面再用Pandoc兜底，这个组合最稳。

2.2 安装配置与基础使用

安装没什么好说的，直接在Chrome应用商店或Firefox附加组件商店搜“markdownload”就能找到，点安装即完成。

装完之后重点是配置，这部分很多人直接跳过了，但恰恰是决定输出质量的关键。点开扩展的“选项”页面，你会看到以下几个核心配置项：

输出格式选择。默认是Markdown，保持默认就好。如果你更习惯用纯文本或HTML，这里也能切换。

图片处理方式。这是我最在意的选项。推荐选“下载图片到本地”，这样生成的md文件会带一个同名文件夹，里面存放所有图片。好处是文档完全自包含，就算原图被删你本地还有备份；坏处是文件数量多，移动位置时得连同文件夹一起搬。如果你只是临时转一份快速看，选“保留远程链接”更轻量，但注意原网站如果做了防盗链，远程图片以后可能显示不出来。

文件名模板。这里支持变量组合，比如{title}、{date}、{domain}。我自己用的是{title} - {domain}，这样文件按网站来源区分，整理时一目了然。

元信息模板。默认模板会在md文件底部附加来源链接和抓取时间，这个建议保留，因为它保留了溯源能力，以后想回原网页查证也方便。

配置完成后，打开任意一篇教程文章，点击浏览器工具栏上的markdownload图标，会弹出一个确认窗口，显示抓取到的标题和内容预览。确认无误后点击保存按钮，一个干净的Markdown文件就落到本地了。

2.3 进阶配置：模板自定义与常见坑

markdownload允许你完全自定义输出模板，不只是文件名和元信息。它的设置项里有一个“Front Matter模板”和“Markdown模板”。Front Matter是文件顶部用---包裹的元数据块，很多Markdown工具（比如Obsidian、Typora、Hugo）都支持解析这个区域。

我个人强烈推荐开启Front Matter，因为它能把抓取时间、来源URL、标题、标签这些信息结构化存起来，后续不管是搜索还是建索引都很方便。参考配置如下：

--- title: "{title}" source: "{url}" date: "{date}" tags: [] ---

然后在Markdown模板位置，把默认的“标题+正文”结构改成带引用来源的形式，比如正文开头加一行“原文链接”文字，这样读的时候能知道出处。

再说说使用中容易踩的坑：

动态加载页面抓不到内容。很多现代网站的内容是JavaScript异步加载的，markdownload背后的Readability算法只能处理静态HTML。遇到这种页面，得先手动滚动页面，让内容加载完，再触发抓取。如果还不行，就得用更重的工具兜底（后面会讲）。
代码块被截断或丢失缩进。大部分情况下markdownload对<pre><code>块的转义处理是对的，但偶尔碰到极端格式的页面，代码块会丢失部分缩进。我的习惯是抓取后在本地编辑器里快速扫一眼代码部分，确认再入库存档。
相对路径图片。有些网站图片不是绝对路径，抓取下来后markdownload会尝试解析，但偶尔还是会得到相对路径。这是导致md文件图片显示不出来的常见原因之一，碰到就手动改一下md文件里的图片地址。

3. Markdown 到 PDF：从工具链到成品的完整拼图

拿到md文件只是第一步，多数人下一步想的是：怎么转成排版好看的pdf。这里方案非常多，但各自适用场景和侧重点完全不同。我按“省心程度”和“控制力”两条线，把主流方案分成四档，你可以按需取用。

3.1 方案A：Typora + 主题，小白首选

如果你想要“一个软件搞定所有事”，Typora是最省心的选择。它本身是Markdown编辑器，自带“导出为PDF”功能，本质上是调用内置的渲染引擎把md渲染成HTML再打印成PDF。

我为什么把它排在第一个推荐？因为Typora导出的PDF效果接近网页版渲染效果，所见即所得。代码高亮、表格样式、引用块样式都能保留，而且不用安装任何额外依赖，不用配置LaTeX环境，对绝大多数场景来说足够了。

具体操作：

用Typora打开你的md文件。
点击菜单“文件 → 导出 → PDF”。
在弹出的设置里选择页面大小（A4/A5/Letter）、页边距、是否生成目录等。

这里有一个容易被忽略但很重要的技巧：Typora支持CSS主题定制，换个主题就等于换了一套PDF排版风格。默认主题偏简洁，但如果你装了类似“Github”或“Newsprint”这类第三方主题，导出PDF的时候排版会明显更好看。主题的安装方式是：在Typora设置里打开“外观 → 打开主题文件夹”，把下载到的CSS文件放进去，重启Typora即可。

Typora的方案适合单篇文档快速输出，缺点是批量处理能力弱：你没办法命令行调用来批量转100个文件。对大批量需求，看下面的方案。

3.2 方案B：VS Code + Markdown PDF 插件，程序员适用

程序员桌面上必然有VS Code，与其另外装Typora，不如直接用VS Code完成“编辑+预览+导出”闭环。这里要用到的插件叫“Markdown PDF”，安装量很高，稳定性和更新频率都还可以。

安装方式：VS Code扩展商店搜“Markdown PDF”，装好后在md文件标签页右键，选择“Markdown PDF: Export (pdf)”即可。

这个插件的底层机制是先用markdown-it或marked把md渲染成HTML，再通过Chromium内核打印成PDF。所以它对代码高亮、数学公式（配合Markdown+Math插件）、mermaid图表的支持，取决于你装了哪些关联插件。我的经验是在VS Code里装一套“Markdown All in One + Markdown PDF + Markdown Preview Mermaid Support”组合拳，基本覆盖日常所有需求。

插件在settings.json里暴露了不少配置项，常用的有这么几个：

{ "markdown-pdf.outputDirectory": "pdf-output", "markdown-pdf.styles": ["print.css"], "markdown-pdf.format": "A4", "markdown-pdf.margin.top": "1.5cm", "markdown-pdf.margin.bottom": "1.5cm", "markdown-pdf.margin.right": "2cm", "markdown-pdf.margin.left": "2cm" }

outputDirectory可以设置导出文件的存放目录，这样不会跟源md文件混在一起。styles可以指定一个额外的CSS文件，用来微调打印样式，比如字体大小、行间距、代码块背景色。这里我强烈建议你建一个print.css，写上你自己的打印排版规则，后续所有导出都统一走这一份样式，风格会非常一致。

方案B的优势是可脚本化。配合VS Code的任务功能或命令行，你可以一键把某个目录下所有md文件全部导出为PDF。具体做法是编写一个.vscode/tasks.json，调用markdown-pdf插件的命令，或者直接用命令行：

for f in *.md; do code --install-extension yzane.markdown-pdf && code "$f" --command "markdown-pdf.convert"; done

不过这个命令触发的可靠性在不同版本VS Code里不太一样。如果你想稳定批量处理，更推荐下一档方案。

3.3 方案C：Pandoc + LaTeX，高质量排版终极选择

如果前两种方案你还嫌不够专业——比如要生成带页眉页脚、目录页码、参考文献样式的正式文档，那就得上Pandoc了。Pandoc是文档转换领域的瑞士军刀，支持Markdown、HTML、LaTeX、docx、epub等几十种格式互转。

用Pandoc把md转PDF，底层有两种路线：

路线1：md → LaTeX → PDF。需要本地安装TeX发行版（MacTeX或MiKTeX），排版质量最高，但环境安装体积大（几个GB）。
路线2：md → HTML → PDF。利用wkhtmltopdf或WeasyPrint这类工具，不需要装TeX，但控制力弱一些。

我最常用的是路线1，下面给一个带中文字体支持的完整命令示例：

pandoc input.md -o output.pdf \ --pdf-engine=xelatex \ -V mainfont="Noto Serif CJK SC" \ -V sansfont="Noto Sans CJK SC" \ -V monofont="Noto Sans Mono CJK SC" \ -V geometry:margin=2cm \ -V CJKmainfont="Noto Serif CJK SC"

这里的关键是--pdf-engine=xelatex，用XeLaTeX引擎才能正确处理中文。mainfont、sansfont、monofont分别指定正文、无衬线字体和等宽字体，都选系统中包含中文字形的字体。geometry控制页边距。

如果你还想要页眉页脚和目录，可以加一行：

-V header-includes="\usepackage{fancyhdr} \pagestyle{fancy} \fancyhead[L]{我的知识库}" \ --toc \ --toc-depth=2

--toc会自动生成目录，--toc-depth=2表示目录包含二级标题。fancyhdr是LaTeX的页眉页脚宏包，设置好之后每页顶部会显示你指定的文字，适合做正式文档。

方案C的学习曲线最陡，但它的可重复性最强——给你100个md文件，跑一条命令，全部变成版式统一的PDF。这个优势在团队标准化交付场景下尤其明显。

3.4 方案D：浏览器打印，最后一招但永远有效

有时候你手头没有任何md转换工具，又急着把一份md变成pdf，这时候有个万能方案：把md内容粘贴到支持Markdown渲染的网页端编辑器里（比如StackEdit、语雀、Notion、HackMD），然后用浏览器自带的打印功能输出PDF。

操作步骤：

打开任意在线Markdown编辑器。
粘贴md内容，确认渲染效果正常。
按Ctrl+P（Mac上是Cmd+P）打开打印对话框。
目标打印机选“另存为PDF”，调整好边距。
保存。

这个方案的精髓在于利用浏览器的打印引擎。你不需要装任何软件，只要浏览器本身能渲染网页，就能输出PDF。它跟直接打印原网页的最大区别，就是你绕过了原网页的杂乱布局，只打印Markdown渲染后的干净内容。

注意打印设置里一定要开启“背景图形”选项，否则代码块的深色背景会被干掉，代码反白文字直接变成看不清的黑块。这个选项在Chrome打印对话框的“更多设置”里。

方案D适合应急场景，但有个硬伤：如果md里嵌的是本地图片，在线编辑器读不到本地路径，图片会全部裂开。这种情况要么先把图片传到图床，要么老老实实用前三种方案。

4. 把整条工作流串起来：一个从零到一的实操记录

4.1 实操演练：从一篇教程网页到排版精良的PDF

理论说再多，不如完整跑一遍。我挑一个真实场景来演示。

场景：在浏览一篇关于“计算机视觉算法与应用”的课程讲义，内容涉及大量公式和代码块，需要转成PDF发给同事做学习材料。

第一步，抓取网页为md。我点击markdownload图标，确认预览里正文内容完整，代码块、公式无误，保存到本地。因为讲义里的公式是LaTeX格式，markdownload抓取时保留了原样的 $...$ 和$$...$$语法，这在后面的转换中是关键。

第二步，在Typora里快速预览。我只关心一个问题：公式渲染正不正常、代码块的高亮是否还在。结果没问题，因为这讲义里的公式渲染依赖MathJax，Typora对$符号的支持很成熟。

第三步，用Pandoc + XeLaTeX转为正式PDF。考虑到这是给同事用的正式材料，我决定用方案C，命令如下：

pandoc 计算机视觉讲义.md -o 计算机视觉讲义.pdf \ --pdf-engine=xelatex \ -V mainfont="Noto Serif CJK SC" \ -V monofont="JetBrains Mono" \ --toc --toc-depth=2 \ -V geometry:margin=2.5cm \ --highlight-style=tango

注意我加了--highlight-style=tango，这是指定代码高亮风格的参数，可选的还有haddock、kate、monochrome、espresso等。tango是我试下来在打印场景里最稳的一种，颜色对比度适中，黑色墨水里也看得出层次。

第四步，检查产出。PDF生成后，我翻了首页、含公式的页、含长代码块的页。首页有目录，公式字体清晰，代码块有深色背景，没有出现中文乱码或字体缺失。这个产出可以直接发出去。

4.2 常见问题与排查技巧实录

整个链路里，不同环节的坑完全不一样，我按频率从高到低列个速查表。

问题现象	位置	可能原因	解决办法
抓取后md文件里图片全部消失	网页转md	图片是懒加载或异步加载的	抓取前手动滚动页面让图片加载完；或改用保留远程链接模式
代码块在md里缩进全乱	网页转md	原网页用了特殊的缩进字符，Readability解析出错	在编辑器中全选代码块，用“格式化文档”重新整理；太严重的直接用Pandoc从HTML转md
PDF里中文字体发虚或方块	md转pdf	字体未指定或没有中文字形	换XeLaTeX引擎，明确指定`CJKmainfont`；Windows下可以用“Microsoft YaHei”
数学公式显示为原始 $...$	md转pdf	转换引擎没启用数学支持	Pandoc加`--mathml`或`--webtex`；Typora设置里开启MathJax
表格列宽对不齐	md转pdf	表格本身就是超宽表格，页宽容纳不下	在CSS里设表格`font-size`调小，或设`table-layout: fixed`配合`word-wrap: break-word`
页边距太宽/太窄	md转pdf	未设置geometry参数	Pandoc加`-V geometry:margin=2cm`；Typora在导出设置里调整
导出的PDF体积异常大	md转pdf	内嵌了高分辨率图片	用`--dpi`参数控制Pandoc导出图片分辨率；或先压缩图片再转

再补充几个我在实际中摸索出来的小技巧：

git管理md，而不是管理pdf。md是文本，diff起来清晰可追溯；pdf是二进制，版本管理一团糟。我所有抓取的md都放进git仓库，每次修改有记录，要发布时才生成pdf。
给md文件加Front Matter标签。抓取时自动加上来源URL、日期、原文标题，这在后面做全文搜索、自动归档的时候会省很多事。
批量转换用Pandoc，不要用GUI工具点鼠标。100个文件用Typora逐个导出会崩溃的，一条批量命令几秒搞定。
统一CSS，统一风格。不管用Typora还是VS Code，把CSS固定下来，输出的PDF永远一个样，长期积累下整个知识库的文档风格会非常统一。