很多人第一次尝试把CSDN上的技术文章保存下来，第一反应都是复制粘贴到Word里。结果代码缩进全乱、深色代码块的白字直接消失、图片变成裂图、目录变成一堆超链接。接着去搜“在线网页转PDF”，又容易踩进下载客户端、注册会员、甚至上传后还要等几分钟的套路里。我花了一整个下午把几十篇CSDN技术笔记整理成PDF归档之后，发现这件事其实用浏览器自带能力就能做到八九成，真正提升体验的只是几个关键设置和一点自动化手段。这篇文章就把我验证过的完整流程写出来：单篇导出、页面清理、批量备份、导出后的二次处理，按需选章节看就行。
1. 导出CSDN文章为什么总是栽在排版、登录和代码这三件事上
市面上所谓的“网页转PDF工具”很多，但你去细看，绝大多数是把网址丢进一个远程服务器，由服务器用无头浏览器把网页截图后塞进PDF。听起来很合理，实际效果却很不稳定，尤其是CSDN这种结构复杂、交互多的页面，问题尤其集中。
1.1 网页排版与纸质排版是两套逻辑
网页设计天生是给屏幕看的，固定顶栏、侧边目录、悬浮操作按钮、懒加载图片都是桌面端的常态。打印则是一套完全不同的呈现逻辑：CSS里有一套专门的@media print规则，用来决定哪些内容在打印时显示、哪些隐藏，以及怎么分页。问题在于，CSDN文章页并没有专门为“打印阅读”仔细设计过这一套规则，很多屏幕上必要的导航模块在打印时也不会自动消失。
这就导致一个很常见的结果：直接用浏览器打印CSDN文章，预览里常常会混进顶部工具栏、侧边栏、关注按钮、推荐阅读、页脚甚至评论区。正文反而成了配角。很多人到这里就以为浏览器打印“不好用”，转头去下各种转换器，其实是不了解背后原因。只要理解了“打印样式和屏幕样式是两套体系”，后面的一切操作就都好解释了。
1.2 登录可见、代码高亮、目录折叠：CSDN页面的三个典型关卡
CSDN文章页在高频使用中有三个关卡，是导出PDF绕不开的。
第一，登录与可见性。CSDN对文章内容的展示策略并不是把所有内容一次性塞给所有访问者。未登录或登录态失效时，正文可能只显示摘要，目录也经常不完整。这不是打印工具能解决的，只有先让浏览器登录合法账号，页面把完整DOM渲染出来，导出的PDF才可能完整。换句话说，导出前先确认页面底部的内容都出来了，是最基本的底线操作。
第二，代码高亮。CSDN的代码块普遍使用JS动态高亮，关键字、字符串、注释有各自颜色。打印时如果不开“背景图形”这个选项，高亮背景会变成白色，部分依赖背景色区分的内容会直接糊成一片。很多人导出后代码看起来像是一堆黑白文字堆在一起，就是这个原因。
第三，目录折叠与其他交互模块。文章页的目录可以折叠，有的文章还有“展开阅读全文”按钮；如果直接打印，这些交互状态会原封不动带进PDF。要在打印前先手动展开，确保导出的内容是一条完整的正文流，而不是半折叠状态。
2. 浏览器打印面板的正确配置：从入口到关键选项一次看完
如果你的需求只是偶尔保存一两篇文章，完全不需要额外安装软件。Chrome和Edge自带的打印面板就是最稳定的PDF导出工具，关键是几个选项别选错。
2.1 打开打印面板的三种方式
最常用的是快捷键Ctrl+P。也可以鼠标右键页面空白处选择“打印”，或者从浏览器菜单里进入打印选项。三者打开的都是同一个打印预览界面，没有本质区别。
这里有个容易被忽略的细节：按Ctrl+P之前，先点一下文章正文的任意位置，让页面焦点回到主要内容区域。如果焦点还停留在某个展开的弹窗或者搜索框里，打印预览偶尔会呈现一个奇怪的局部画面。还有，不要在开发者工具的Console面板里按Ctrl+P，那样打印的可能是调试视图。
2.2 目标打印机与纸张尺寸的选法
在打印预览左侧的“目标打印机”下拉菜单里，Chrome通常直接显示“另存为PDF”；Windows上的Edge则会出现“Microsoft Print to PDF”。两者都会弹出一个保存PDF文件的对话框，只是命名不同，选哪个都行。
纸张尺寸默认一般是A4或Letter。中文技术文章用A4最舒服，宽高比例适配普通打印和屏幕阅读。如果你只是想做成电子版分享，不一定非要A4，A5甚至自定义尺寸都可以，文件会更小、更便于手机阅读。我自己常用A4，主要是方便以后真拿去打印时不调整版式。
2.3 让深色代码块和目录正确印出来的三个关键勾选项
打印面板左侧有“更多设置”区域，里面几个选项直接影响输出质量。
第一，打开“背景图形”。在Chrome里，这个开关叫“背景图形”；在Edge里叫“背景图形”或“后台打印”。这一项必须开，否则代码高亮会丢失，文字和背景颜色都变成黑白的，阅读价值直接降一半。
第二，边距选择“窄”或“自定义”。CSDN正文两侧本来就有较宽的留白，如果打印默认的“默认”边距，A4纸利用率会很低。实测下来用“窄”边距，同等内容能减少10%~20%的页数，阅读也更紧凑。
第三，关闭“页眉和页脚”。不关的话，每页顶部会有一条网址和日期，既碍眼，又容易让代码换行错位。关掉之后页面干净得多。
2.4 打印前先在网页上做的准备工作
打开打印面板之前，建议先滚动到文章底部再回顶部。这一步是为了触发所有懒加载图片。很多CSDN文章配图用了懒加载机制，页面没滚动到那里时图片不会真正下载，直接打印就会出现图片区域空白。
同时把文章里的折叠目录都展开，如果有代码块默认只显示前几行，也要先点开。最后看一眼打印预览总页数大概在多少，如果出现某页只有一行字或者某页是空白页，通常是页面结构里有隐藏的浮动元素，需要回到页面把那个元素关掉再重试。
3. 先清理再导出：阅读模式和控制台“瘦身术”
直接打印CSDN页面，你会发现PDF里总会混进一些与正文无关的东西。想追求干净的版式，就要在打印前把页面“瘦身”。这一步不复杂，但很关键。
3.1 用Chrome/Edge的沉浸式阅读器快速去噪
Edge内置了一个原生的“沉浸式阅读器”，在浏览器地址栏右侧能找到一个书本图标，或者直接按F9进入。进入后，页面会把正文重新排版，只留下标题、文字和图片，所有侧栏、页脚、推荐区都被剥离。在这个模式下按Ctrl+P，打印预览会干净很多，几乎不需要再调整。
Chrome没有Edge那样开箱即用的阅读器，但可以通过安装“沉浸式阅读器”扩展或在地址栏前拼上“read://”来触发类似的阅读视图。这个方案快是快，但对CSDN的代码块兼容性一般，某些动态高亮会被拍平成普通文本，缩进好的代码会变成一行行凑合排列的样子。所以我的建议是：纯文字文章用阅读器，带大量代码的文章用控制台清理法。
3.2 控制台直接删掉侧栏、页脚和推荐块
追求可控的排版时，我会用控制台手动删掉页面多余节点。打开开发者工具（F12），切到Console面板，执行一段JS，把不需要的模块从DOM里移除：
document.querySelectorAll( '#csdn-toolbar, .sidebar, .recommend-box, .comment-box, .toolbox-list, .article-footer, .more-footer, .blog-footer, .mask-dark, .popup-box' ).forEach(el => el && el.parentNode && el.parentNode.removeChild(el));选择器按当前页面实际类名调整即可。这个操作只影响当前页面，刷一下就能恢复，完全不用担心改坏原网站。执行完之后立刻按Ctrl+P打开打印预览，剩下的就是正文宽度铺满的一页。这种做法的好处是保留所有CSS和代码高亮，又只删掉多余区域，打印效果最接近排版成品。
3.3 长代码块截断问题的提前修补
CSDN代码块在页面上有横向滚动条，但打印到纸上不会出现滚动条，超出页面宽度的代码会被直接裁掉。要解决这个问题，可以在控制台对代码块执行自动折行：
document.querySelectorAll('pre code, pre').forEach(el => { el.style.whiteSpace = 'pre-wrap'; el.style.wordWrap = 'break-word'; el.style.overflowWrap = 'break-word'; });执行后超长的行会折到下一行，而不是被截断。代价是原本的横排缩进结构会稍微变化，但内容一个都不会丢。如果文章里有特别长的日志或异常堆栈，这段代码几乎是必备的。
4. 批量备份自己文章：用Playwright自动化打印PDF
只导出两三篇文章，前面两章的路子已经够用。但如果你和我一样，想把专栏里几十上百篇文章定期归档，逐篇打开、滚动、Ctrl+P、保存，人是会崩溃的。这种时候需要把打印流程脚本化。
4.1 为什么不用requests直接抓HTML
最开始我尝试用过Python的requests把文章HTML抓下来，再用weasyprint生成PDF，结果很快放弃。原因是CSDN文章页里的正文虽然大多是服务端渲染，但代码高亮、目录状态、部分图片尤其是懒加载图片，都得靠浏览器端JavaScript执行完才能完整呈现。requests拿到的HTML有正文骨架，却缺了最终的样式和动态内容，生成的PDF看起来就像“半成品”。
用Playwright这类无头浏览器自动化则完全不同。它会真正启动一个浏览器内核，完整执行页面里的所有脚本，最终拿到和你肉眼看到的一模一样的渲染结果。这样导出的PDF，和手动Ctrl+P几乎无差别，甚至更稳定。
4.2 一个开箱即用的Playwright脚本
下面是一个我已经跑通的Node.js脚本，可以把指定文章依次导出为PDF。先在工作目录安装依赖：
npm init -y npm install playwright npx playwright install chromium然后创建export.js：
const { chromium } = require('playwright'); (async () => { const browser = await chromium.launch(); const page = await browser.newPage(); const urls = [ 'https://blog.csdn.net/你的用户名/article/details/文章ID1', 'https://blog.csdn.net/你的用户名/article/details/文章ID2', 'https://blog.csdn.net/你的用户名/article/details/文章ID3' ]; for (const url of urls) { await page.goto(url, { waitUntil: 'networkidle' }); await page.waitForTimeout(2000); await page.pdf({ path: `article-${Date.now()}.pdf`, format: 'A4', printBackground: true, margin: { top: '12mm', bottom: '12mm', left: '12mm', right: '12mm' }, displayHeaderFooter: false }); console.log(`已导出：${url}`); } await browser.close(); })();waitUntil: 'networkidle'会等待页面网络请求基本安静下来，额外2秒是给懒加载内容留缓冲。printBackground: true对应前面手动操作里的“背景图形”，不开的话代码高亮照样丢。displayHeaderFooter: false则能去掉页眉页脚。整个脚本按顺序导出多个PDF，文件名用时间戳区分，不会互相覆盖。
4.3 登录态保存：复用一个已登录的浏览器上下文
自动化导出自己的文章时，有时候页面需要登录态才能看到完整内容。Playwright提供了一个很实用的方式保存登录状态。
第一次运行脚本时，不要直接headless，而是用一个有头浏览器打开CSDN，手动登录，然后用context.storageState把cookie和localStorage保存到一个JSON文件：
const browser = await chromium.launch({ headless: false }); const context = await browser.newContext(); const page = await context.newPage(); await page.goto('https://blog.csdn.net/'); // 手动登录，然后执行： await context.storageState({ path: 'state.json' }); await browser.close();后续脚本里改用：
const context = await browser.newContext({ storageState: 'state.json' });这样每次导出都默认带上登录信息，文章正文能完整读取。需要特别说明的是，这个能力只适合处理你自己写的、或者获得转载授权的文章；对需要付费订阅才能阅读的内容，用脚本绕过权限既不合规也不合适，我是明确不建议这么做的。
4.4 多篇文章顺序打印与后续合并
脚本每篇文章生成一个PDF，如果你有需要把所有PDF合并成一个总文件的场景，可以用pdf-lib或者pypdf做顺序拼接。不过我更建议按系列或主题分别保存，单文件太大时打开速度会明显下降，而且在阅读器里定位也费劲。
自动化最大的价值并不是“省几分钟”，而是让归档变成一种可持续的习惯。我目前的做法是每个月跑一次脚本，自动把当月新增的笔记导出备份，文件名里带上日期，配合网盘同步，基本不会再出现“文章被误删却找不到底稿”的情况。
5. 导出后的收尾工作：纸张尺寸、PDF转Word和网页内嵌PDF
打印完成不代表事情结束。实际使用中，很多人还会遇到自定义纸张尺寸、PDF转Word再编辑、以及页面内嵌PDF文档怎么下载这几个延伸问题。
5.1 在Windows里给Microsoft Print to PDF添加自定义纸张尺寸
“Microsoft Print to PDF如何添加新纸张尺寸”是个说难不难、说简单又容易卡住的操作。这个虚拟打印机其实支持自定义纸张，只是入口藏得比较深。
在Windows设置里进入“打印机和扫描仪”，选到“Microsoft Print to PDF”，点击“打印服务器属性”，切到“纸张”标签页，新建一个纸张规格。比如你想做竖版电子书，可以设置宽度148mm、高度210mm，然后保存。
设置完成后，回到浏览器打印预览面板，在“纸张尺寸”下拉菜单里就能看到这个自定义规格。选它之后，打印出来的PDF就是按这个尺寸排版的。这个操作对系统版本和浏览器版本都有点挑剔，如果找不到入口，不妨换个路径：控制面板里的“设备和打印机”右键Microsoft Print to PDF也能进入“打印服务器属性”。
5.2 什么时候值得把PDF转成Word再处理
导出PDF后如果你想继续编辑文字、调整段落，或者给领导提供一份可修改的版本，PDF转Word是有意义的。但如果你只是为了阅读存档，转成Word反而会把代码块和表格拆得支离破碎，得不偿失。
市面上的转换工具有不少，我用过的有Adobe Acrobat、WPS和搜狗PDF编辑器。共同特点是：对文本型PDF（文字可选中、有文本层）转换效果好，对纯扫描图片型PDF无能为力。CSDN文章导出的PDF只要不是用截图方式拼的，基本都有文本层，转Word后能正常选中、改字号、改页边距。如果打开PDF后发现文字根本选不中，说明它是图片型，那就得先做OCR，识别出的文字错误率在高亮代码场景下尤其高，最好别依赖。
5.3 网页中内嵌的PDF文档怎么保存
有些CSDN博主会把资源文档直接嵌在文章页里，页面中间显示一个PDF预览窗口，右下角或顶部通常有下载按钮。这时可以直接点下载，保存的是博主上传的原始PDF文件，和从外部下载没区别。
如果预览窗口没有显示工具栏，可以试着在PDF预览区域右键选择“另存为”，或者用Ctrl+S保存整个网页，保存后会顺带把内嵌PDF文件以附件形式存下来。这种保存动作拿到的就是原始PDF，效果远好于截屏。但有一点要注意：如果预览窗口是通过JS动态加载的，直接在页面未见完时按Ctrl+S可能拿不到；先让页面加载完成再操作。
6. 我反复在打印CSDN文章时踩过的坑（个人备忘）
最后，把那些让我浪费过时间的坑整理出来。每一条都不是什么高深理论，但都是在实操中真实遇到过的麻烦。
6.1 开着旧版兼容模式打印，样式会乱成一团
用Edge浏览器的IE兼容模式打开CSDN页面，然后打印，页面的CSS渲染会退回旧逻辑，打印预览经常出现正文偏窄、代码块被压缩成一行行的古怪效果。遇到这种情况，先退出兼容模式，用正常的Chromium内核重新打开页面再打印，问题基本就消失了。
6.2 代码块被裁断的终极原因与就地修补
长代码块在打印时会被当成一个横向滚动区域，超出的部分不会自动换行，而是直接裁掉。用第3章提到的white-space补丁能保住内容，但某些注释特别长、缩进特别深的代码，折行后阅读起来仍然费力。我的习惯是：文章里如果有超长代码，先把浏览器窗口拉宽，再把打印比例调到90%左右，确认预览里没有横向截断后再正式导出。宁可在纸上稍微小一点，也不要代码行被腰斩。
6.3 先登录、再展开“全文”是底线动作
我有一次批量导出时，结果出来一大批只有摘要的PDF。排查了半天，才意识到那段时间的浏览器登录态过期了，CSDN在HTML里根本没返回后续正文。这个坑的教训很直接：无论手动操作还是脚本批量处理，导出前都要确认页面底部已经完整加载，目录和正文都正常出现在预览里。看清了再执行，比事后逐个排查省太多时间。
6.4 别把PDF当成唯一存档，Markdown和MHTML才是底稿
PDF适合阅读、分享和归档，但不适合作为唯一底稿。它是“印刷品”，一旦原网页删除、样式更新或者你想重新编辑，PDF很难改。我现在给自己的文章做存档时，会同时保留一份Markdown源文件和一份网页快照（MHTML或剪藏工具的存档），PDF只是配合给别人看的可打印版本。这样就算站点哪天出了什么意外，底稿仍然在自己手里。
打印PDF这件事看起来简单，真正做好却很依赖对页面机制和浏览器规则的理解。从手动调打印选项，到控制台清理页面，再到用Playwright批量自动化，每一步都是在解决一个具体问题。如果你也有保存CSDN文章的需求，建议先从第2章的方法试起，觉得不够用再往自动化走，操作一遍基本就能摸清全部门道。
