开头

大家平时逛CSDN搜技术文章，经常会遇到一篇特别对口的博客，想存下来离线看，或者转发给同事一起参考。最直接的办法就是导出成PDF。但真去操作的时候才发现，事情没那么简单——直接按Ctrl+P打印，出来的PDF里一半是侧边栏推荐、用户头像、浏览排行，正文被挤得难受，代码还动不动就从中间断页。这篇文章我想把CSDN文章导出PDF这件事彻底讲透，从最简单的浏览器打印，到插件截图，再到命令行批量导出，每种方案都把原理、步骤和坑点讲清楚。

我之所以想写这个话题，是因为前阵子帮几个搞嵌入式的朋友整理一批关于智能车竞赛的技术资料，CSDN上有几十篇文章要归档成PDF，我当时试了四五种方式，最后才找到一个稳定好用的组合方案。这个过程踩了不少坑，比如图片加载不全、代码块截断、页眉页脚带着网址乱入，甚至导出后中文变成了乱码。这些经验我觉得很值得分享出来。

如果你只是偶尔导一两篇，用浏览器打印那一招就够了；如果你和我一样需要批量整理资料，或者对排版有要求，可以直接跳到后面命令行自动化的部分。两种思路我都给出了可复现的操作步骤。

1. 内容整体设计与思路拆解

1.1 CSDN页面结构决定了不能无脑打印

CSDN博客页面大概是这类技术社区里结构最复杂的页面之一。除了正文区，页面上还有顶部导航、博主信息卡片、关注按钮、广告位、侧边栏推荐、底部“相关推荐”、评论区和“阅读全文”折叠层。这也是为什么直接Ctrl+P打印几乎总是翻车——浏览器把整个可视区域的内容都塞进了PDF，正文反而显得乱。

我习惯在动手之前先理解页面结构，因为只有知道正文在哪个容器里，才能选对“只保留正文”的策略。以目前CSDN博客的典型页面来说，正文内容基本都在 <div id="content_views" class="markdown_views"> 这个容器里，这一点可以用开发者工具验证。有了这个锚点，后续无论是写好打印样式、写浏览器脚本还是用Puppeteer来抓，都知道该针对谁去做处理。

另一个值得留意的点是，CSDN的Markdown渲染结果里，代码块和图片都有内联样式，代码高亮依赖CSS类。直接打印如果没开“背景图形”选项，代码高亮的背景色会丢失，看起来全是一坨黑色文字，非常费眼。如果开了“背景图形”，又可能把代码块背景带出来，但同时也可能把页面整体的背景色一起带出来。这里面的平衡，需要在打印设置里做细调。

1.2 不同导出路径的底层逻辑对比

把“CSDN文章导出PDF”这件事拆开，本质上是在做一件事：把网页内容转换为分页的文档。围绕这个目标，现在主流有三条路径：

• 路径一：浏览器打印引擎。Chrome和Edge内置的打印功能，相当于把页面重新排版后交给PDF渲染引擎。这个方案最适合单篇文章，零成本、速度快，也基本不需要安装额外软件。
• 路径二：浏览器扩展截图转PDF。这类工具本质是页面截图，再把你选定的区域拼接成图片，最后打包生成PDF。效果上“所见即所得”，但生成的是图片型PDF，文字不能选中、复制、检索，文件体积也大。适合图文为主、不太需要后续编辑的场景。
• 路径三：脚本渲染后打印。用Puppeteer这类无头浏览器打开页面，在内存里执行页面加载、元素隐藏、样式注入，最后调用其PDF接口生成文档。这个方案灵活度最高，能批量处理，也能精细控制排版，但需要写点代码，适合有编程基础的人。

这三条路径没有绝对的优劣，只看场景。下文我会把它们的操作细节逐一展开。

1.3 为什么我建议首选“页面清理+浏览器打印”

单篇文章导出，我最推荐的是“页面清理+浏览器打印”这套组合，而不是直接装插件。原因有三个：

第一，浏览器打印生成的PDF是文本型的，文字可以框选、复制、加注释，对学习笔记特别友好。第二，浏览器打印不需要额外信任第三方扩展，隐私和安全性天然更好。第三，只要在打印前花30秒做一次页面清理，输出质量基本就能达到和付费工具一样的效果。

我实测过很多次，清理前直接在Edge里打印，一份PDF可能有20多页，但真正的正文只占一半，其余全是推荐位、空背景和页面装饰。清理之后，同样内容压缩到12页左右，阅读体验完全不一样。这种“少即是多”的思路，对归档类内容尤其有效。

2. 核心细节解析与实操要点

2.1 打印前如何快速定位正文区域

拿到一篇CSDN文章，我的第一步是判断文章是不是被折叠了。CSDN有“阅读全文”机制，如果页面只显示了开头部分，直接打印出来就会缺内容。这时候需要先滚动到页面底部，点击展开全文，或者使用浏览器的“阅读模式”绕过折叠。

在Chrome里，用快捷键F12打开开发者工具，然后点击左上角的选择器图标，在页面上点一下正文某个段落，Elements面板里就能看到这颗节点所在的DOM树。往上找，通常很快就能定位到 div#content_views 这一层，这就是正文容器。如果是Edge浏览器，甚至可以更省事：打开地址栏右侧的“沉浸式阅读器”图标，Edge会自动提取正文并清理所有杂物，这个过程相当于浏览器替我们做了一遍页面清洗。

需要注意的是，即使进入沉浸式阅读器，CSDN上的图片和代码高亮颜色也不一定能100%保留。阅读器模式更倾向于统一排版，对代码块的背景色支持有时会打折扣。想保留代码高亮效果，还是建议在普通页面模式下操作。

2.2 浏览器打印参数的逐项设置

打印参数这一节，我直接讲我常用的一套配置，你可以照着设置：

打开文章页后，按 Ctrl+P 调出打印对话框。打印机选择“另存为PDF”或“Microsoft Print to PDF”。布局选“纵向”，纸张大小按需选A4或A5。边距这一步很关键，我会把“默认”改成“无”，让正文内容铺满页面，宽度利用率更高。然后勾选“背景图形”，这个选项对应的是CSS print-color-adjust 和 -webkit-print-color-adjust 的逻辑，不勾的话代码块高亮背景会丢失。

页眉页脚默认是开启的，会显示网址、页码、日期这些信息。做资料归档时我一般都会关掉，除非你想在页脚保留页码信息。勾选开关就在打印预览右侧的“更多设置”里，找到“页眉和页脚”并关掉。

最后，打印范围选择“全部页面”。确认预览效果没问题，点击保存，一个干净的PDF就出来了。

2.3 分页控制是很多人忽略的细节

打印PDF时最影响阅读体验的“小毛病”就是分页。比如代码块刚好被拦腰切断，一行代码上半部分在第一页，下半部分在第二页；或者一个标题孤零零出现在页面最底部，正文却从下一页开始。

要解决这个问题，可以在打印之前用一段临时样式来干预分页行为。具体操作是：在开发者工具的Console控制台里执行下面这段JavaScript，给特定的HTML元素设置分页属性：

javascript复制// 在CSDN文章页控制台执行，防止代码块和标题被分页截断
const style = document.createElement('style');
style.innerHTML = `
  pre, code, table, blockquote {
    page-break-inside: avoid;
    break-inside: avoid;
  }
  h1, h2, h3, h4 {
    page-break-after: avoid;
    break-after: avoid;
  }
`;
document.head.appendChild(style);

这段代码的作用是告诉浏览器：pre、code、table、blockquote 这些元素的内容不要拆分到两页，标题元素后面不要紧跟分页符。为什么选这几个元素？因为我的实测数据显示，CSDN文章中出现分页截断的高发区域，90%都是这三类元素：代码块、表格、长引用块。

执行完这段脚本后再打印，分页会友好很多。当然，如果文章实在太长，代码块超过一页内容，浏览器的分页引擎依然可能被迫打断它，这种情况只能靠调整代码块字号或者手动拆分成多个文件来规避。

2.4 图片懒加载：一个极其容易踩的坑

CSDN的文章页带图片懒加载机制，这意味着页面下方的图片在没有滚动到可视区域之前，是不加载真实资源的，只有占位图或懒加载占位符。如果你在页面顶部直接打印，结果就是导出的PDF里图片全是空白或者一个灰块，内容完全不可用。

这个坑我踩过好几次。规避方法其实不复杂：打印前先把页面从头到尾滚动一遍，让所有图片都触发加载，然后再按Ctrl+P打印。滚动的时候注意看图片是不是真的显示出来了，特别是页面比较长的时候，快速滚动可能触发加载，但还没渲染完就被打印了，我建议滚动到底之后，停留几秒钟，再滚回顶部，等一会儿再打印。

如果你用无头浏览器（Puppeteer）做自动化，同样要处理懒加载，可以在脚本里注入滚动逻辑来触发图片加载，后面我会给一个可参考的最小实现。

3. 实操过程与核心环节实现

3.1 方案一：Edge沉浸式阅读器打印

这是目前单篇导出的“最优解”之一，操作简单，不需要任何额外工具。我这里以Edge为例，Chrome也有类似的阅读模式但逻辑稍有不同。

打开CSDN文章链接，在地址栏右侧如果看到“沉浸式阅读器”图标（一个书本形状的图标），点击进入。如果没看到，也可以直接在地址栏的网址前加 read: 前缀，或者按 F9 快捷键。进入阅读器后，Edge会自动提取文章正文、标题和图片，去掉导航、侧边栏、推荐位等页面杂物。

进入阅读器后按 Ctrl+P，打印机选“另存为PDF”，边距选“无”，勾选“背景图形”，关闭页眉页脚，然后保存。这样得到的PDF非常干净，基本就是纯文章内容，文字可以选择和搜索，非常适合归档。

这里说明一下自己遇到的一个情况：有些CSDN文章里的代码块在阅读器模式下格式会变得很奇怪，比如缩进丢失、高亮颜色变成黑白。如果遇到这种情况，那就不要用阅读器模式，回到普通页面，按第2.2节的方式手动清理页面再打印。

3.2 方案二：普通页面手动清理后打印

当阅读器模式对代码支持不佳时，我用手动清理方案。步骤会稍微多一点，但代码高亮和表格样式保留最好。

在普通文章页按F12打开开发者工具，切换到Console控制台，输入下面这段JavaScript：

javascript复制// CSDN文章导出PDF前，隐藏非正文区域
(function() {
  // 找到正文容器
  const content = document.querySelector('#content_views');
  if (!content) {
    alert('未找到正文容器，请检查页面是否加载完整');
    return;
  }
  
  // 记录所有直接子节点
  const parent = content.parentNode;
  const children = document.body.children;
  
  // 隐藏body下所有直接子元素，然后用正文替换
  Array.from(children).forEach(node => {
    node.style.display = 'none';
  });
  
  // 创建新的body内容
  document.body.innerHTML = '';
  document.body.appendChild(content);
  content.style.width = '100%';
  content.style.maxWidth = '1000px';
  content.style.margin = '0 auto';
  
  // 清除CSDN默认的背景图片
  document.body.style.background = '#fff';
})();

这段脚本干了三件事：第一，找到正文容器 #content_views；第二，把页面上其他无关内容全部从可见DOM里移除；第三，把正文重新放到页面正中并限制最大宽度，防止内容在宽屏上拉伸得过于稀疏。

执行完脚本后，页面会瞬间变成纯正文模式，然后按Ctrl+P调出打印对话框，按第2.2节的参数设置好再保存即可。

需要提醒的是，这个脚本是在内存里对当前页面做的临时修改，不会改变CSDN服务器的数据，刷新页面就会还原。它也不是破解或绕过任何限制的脚本，纯粹是把它当成一个本地排版工具在用，这一点我觉得所有做技术资料整理的人都应该根据文档版权合理使用，只做本地学习参考用途。

3.3 方案三：用Puppeteer脚本批量导出

如果你要导出的文章比较多，比如整个系列十篇二十篇，手动一篇篇点打印实在太痛苦了。这种情况建议直接用Puppeteer写个脚本批量导出。

Puppeteer是Chrome团队推出的Node.js库，它可以在后台启动一个无头浏览器，模拟人打开页面、等待加载、执行脚本、生成PDF。下面是我自己一直在用的一个最小实现：

javascript复制// batch-export.js
const puppeteer = require('puppeteer');
const fs = require('fs');

(async () => {
  // 读取文章URL列表
  const urls = [
    'https://blog.csdn.net/xxx/article/details/111111',
    'https://blog.csdn.net/xxx/article/details/222222',
  ];

  const browser = await puppeteer.launch({
    headless: 'new',
    args: ['--no-sandbox', '--disable-setuid-sandbox']
  });

  for (let i = 0; i < urls.length; i++) {
    const page = await browser.newPage();
    await page.setViewport({ width: 1280, height: 800 });

    // 打开文章
    await page.goto(urls[i], {
      waitUntil: 'networkidle2',
      timeout: 60000
    });

    // 触发懒加载：滚动页面到底部再回顶部
    await page.evaluate(async () => {
      await new Promise((resolve) => {
        let totalHeight = 0;
        const distance = 100;
        const timer = setInterval(() => {
          const scrollHeight = document.body.scrollHeight;
          window.scrollBy(0, distance);
          totalHeight += distance;
          if (totalHeight >= scrollHeight) {
            clearInterval(timer);
            resolve();
          }
        }, 50);
      });
      window.scrollTo(0, 0);
    });

    // 等待图片和字体渲染稳定
    await new Promise(r => setTimeout(r, 3000));

    // 隐藏非正文区域（注入清理脚本）
    await page.evaluate(() => {
      const content = document.querySelector('#content_views');
      if (content) {
        document.body.innerHTML = '';
        document.body.appendChild(content);
        content.style.width = '100%';
        content.style.maxWidth = '1000px';
        content.style.margin = '0 auto';
        document.body.style.background = '#fff';
      }
    });

    // 生成PDF
    await page.pdf({
      path: `article_${i + 1}.pdf`,
      format: 'A4',
      printBackground: true,
      margin: { top: '1cm', bottom: '1cm', left: '1.5cm', right: '1.5cm' }
    });

    console.log(`已导出: article_${i + 1}.pdf`);
    await page.close();
  }

  await browser.close();
  console.log('批量导出完成');
})();

在运行脚本前，先在终端执行：

bash复制npm init -y
npm install puppeteer

然后运行：

bash复制node batch-export.js

这个脚本会自动逐篇打开文章，滚动加载全部图片，清理页面元素，再输出PDF。实测下来，准确率比手动操作稳定很多，一次跑完不需要盯着屏幕。

3.4 方案四：复制到Markdown编辑器再导出

如果你需要的不是PDF，而是希望后续能自由编辑、修改格式，那么“复制到Markdown编辑器再导出PDF”是另一条很香的路径。

CSDN文章有“复制”功能，但直接复制出来的内容可能是带HTML标签的。更干净的方式是：打开CSDN的Markdown编辑器模式，全选正文的Markdown源码，然后粘贴到本地的Markdown编辑器（比如Typora、Obsidian或VS Code + Markdown插件）里。粘贴导出时选择PDF引擎，可以做到代码高亮、目录、超链接全部保留。

这条路径需要注意两个细节：第一，CSDN有些文章图床的图片有防盗链设置，在本地Markdown编辑器预览时图片可能不显示，需要重新上传或替换图床；第二，公式如果依赖MathJax渲染，本地导出前要确认编辑器的公式引擎是启用的，否则公式会变成一堆源码。

从实践来看，这条路径适合要做二次加工的文章，如果你只是归档保存，浏览器打印和Puppeteer更省事。

4. 常见问题与排查技巧实录

4.1 PDF里图片不显示或者全是空白

这个问题我遇到最多。原因基本就是前面提到的懒加载没触发。浏览器打印前没有滚动页面，图片资源没被加载，打印时自然抓不到内容。解决办法就是先滚动到页面底部，等图片全部出现后再回到顶部打印。

另一个可能的坑是图片加载了但背景是透明的，PDF某些阅读器显示偏白。这种可以把页面背景设置为纯白色后再导出，或者用PDF编辑器加一层白色背景。

4.2 代码块被分页截断

代码块从中间断页是最影响阅读的，尤其是一行代码被切成两半，根本无法使用。解决方式已经说过，就是用第2.3节那段CSS脚本给 pre、code 元素设置 break-inside: avoid。如果还能截断，可能是代码块真的超过一页高度，这时候只能考虑调整页面边距、减少代码字号来压缩高度。

还有一个容易被忽略的点：CSDN的代码块外层有个复制按钮悬浮层，打印时偶尔会带出一个悬浮按钮贴在代码块旁边，非常丑。清理脚本把这些悬浮元素隐藏掉就能解决。

4.3 导出PDF后中文字体变方块或乱码

通常是因为系统缺少部分中文字体，或者浏览器在打印时没有正确嵌入字体子集。Windows系统下Chrome和Edge一般不存在这个问题，但有些精简版Linux系统会出现。解决办法是在系统里安装完整的文泉驿或思源黑体字体，然后重新启动浏览器再打印。

如果你用的是Puppeteer，可以在启动参数里加一个 --font-render-hinting=none，然后确保服务器上装了中文字体：

bash复制apt install fonts-noto-cjk

4.4 页面上的广告和推荐位还是被打印出来了

按第3.2节的清理脚本操作后，理论上不存在这个问题，但如果你只是简单滚动后直接打印，推荐位就会被带进PDF。我的建议是：无论用哪种方式打印，都先看一眼打印预览。如果看到广告、推荐或其他无关内容，回到页面执行一次清理脚本，再重新打开打印对话框。

4.5 文件太大，几篇文章的PDF加起来几百MB

图片型PDF和包含大量高清截图的文档，体积会比较大。归档时不建议直接发原文件，先用PDF打包工具或线上压缩服务处理一遍。常用的做法是用Adobe Acrobat的“优化扫描PDF”功能，或者用开源工具 qpdf 做线性化和压缩，体积能缩减到原来的三分之一。

4.6 常见问题速查表

5. 一些实用的提高效率的小技巧

5.1 把清理脚本保存成代码片段

第3.2节那一段清理脚本，我建议你保存为浏览器代码片段（Snippets）。Chrome的DevTools里有一个Snippets功能，可以把常用脚本保存下来，下次直接在页面里运行。同样，在Edge的“收藏夹-开发人员工具”里也能管理。

这样以后每次导出文章，只需要两步：打开文章、运行Snippets，然后Ctrl+P。三步变两步，批量整理的时候能省不少时间。

5.2 打印前把字号调整到适合阅读的比例

CSDN默认正文字号在电脑上看没问题，但印成PDF后，如果你用手机看，或者打印成纸质版，字号会显得偏小。一个很简单的技巧是在清理脚本里加一行样式：

css复制#content_views {
  font-size: 16px;
  line-height: 1.75;
}

这是适合阅读的舒适字号和行高。如果是对着屏幕看，16px足够；如果是准备打印在A4纸上，14px也够用，当然具体还是要根据内容密集度调整。

5.3 用PDF后期工具做页边调节

有些时候导出的PDF页边距过大，比如左右各有2厘米空白，文字挤在中间。这种情况不用重新导出，可以用PDF编辑器直接调整页面裁剪。很多免费工具如PDF-XChange Editor、LibreOffice Draw都可以做到。我个人更推荐导出前就把边距设为1~1.5厘米，一步到位。

5.4 导出前用“打印预览”检查一次

这一步看着简单，但我发现很多人跳过预览，直接从上一篇文章的打印设置里另存，结果导出一份格式不对的文件。打印预览一定要看三样东西：第一，正文是否完整，有没有折叠；第二，代码块有没有被切断；第三，页眉页脚和背景是否如预期。预览满意后再点击保存，这能避免大部分返工。

6. 关于CNKI、CSDN这类平台导出的合规建议

说了这么多技术方案，最后想从实际使用角度提醒一句：CSDN上的文章版权归作者或平台所有，导出PDF请只用于个人学习、归档、离线阅读等合理用途，不要将导出的文档二次发布、传播或用于商业用途。这个和本文档中我们做的本地归档动作是两个层面的问题，但从内容消费伦理上说，尊重原创作者和平台规则，是每个技术人员都应该有的意识。

7. 踩坑实录与我的最终推荐方案

整个过程里，我踩过最深刻的一个坑就是以为“Puppeteer能解决一切”，结果一跑，代码块高亮丢失、图片加载超时、字体渲染成方块，各种问题层出不穷。后来我总结出适合自己的“分层”策略：

• 单篇快速导出：Edge沉浸式阅读器 + Ctrl+P，30秒内搞定，优先推荐。
• 单篇但代码较多：普通页面清理脚本 + Ctrl+P，保留高亮和表格样式。
• 批量导出：Puppeteer脚本，配合等待时间、滚动触发和清理逻辑，一次性导出整个系列。
• 需要二次编辑：复制Markdown源码到本地编辑器，再导出PDF或直接保留为Markdown。

这套方案我用了很长一段时间，实测下来稳定、可控、无额外成本。如果你试了之后有更好的思路，也欢迎在评论区交流。技术方案没有绝对的最优，适合自己的场景就是最好的。