在CSDN上写博客的人应该都经历过这种场景翻到一篇特别好的技术文章随手就存了书签结果过段时间再点开提示文章已删除或者博主改名了。更常见的是自己辛辛苦苦写的文章想留个排版固定、不会被平台改版影响的版本或者想把别人写的内容离线存一份慢慢研究。我自己的习惯是只要觉得某篇文章值得二刷就顺手导出一份PDF丢进本地文件夹做笔记方便也完全不担心哪天链接失效。CSDN文章导出PDF这件事听起来很简单浏览器自带的打印功能都能做但做出来的效果往往惨不忍睹左侧导航栏被打印进去、代码块被截断、图片不加载、页眉页脚乱入。我前前后后折腾了两三年换过各种工具和方法今天把踩过的坑和验证过的方案一次性整理清楚。文章会从最简单的浏览器打印讲起然后到如何用CSS微调排版最后聊聊适合批量场景的脚本方案。不管你是只想偶尔存一篇还是想系统性备份整个专栏都能找到对应的办法。1. 为什么非要存成PDF在线文章的三个痛点在动手之前先聊清楚动机。很多人觉得PDF导出是个伪需求浏览器收藏夹不也能存文章吗但真正在CSDN写过和读过大量文章的人大概率都遇到过下面这些情况。1.1 在线内容的易失性CSDN上不少优质文章是博主自己沉淀多年的笔记但平台的运营规则、博主的个人意愿都会影响文章是否长期在线。我有几篇看了好几遍的硬件调试文章就是某天突然变成博主已删除该文章连缓存都来不及找。这种事碰上几次就会养成随手备份的习惯。PDF不是唯一方案但在通用性、可阅读性和排版稳定性上综合体验最好。1.2 离线阅读和标注需求通勤路上、飞机上、或者网速不稳定的环境里在线网页的体验并不好。PDF导出后可以扔进手机和平板用自带的阅读器就能打开还能直接在上面写写画画。尤其是一些代码量大、逻辑链条长的文章手写标注比来回滚动网页效率高得多。我自己常用微软的Edge阅读器做批注比浏览器看网页舒服太多。1.3 知识管理归档需要如果你用OneNote、印象笔记或者本地Obsidian做知识库PDF是一种非常方便的归档格式。它可以保留原始排版不会被编辑器语法转换弄乱同时检索也很方便Windows和macOS的搜索都能直接搜PDF里的文字。CSDN的文章页面元素太杂直接打印成PDF相当于做了一次内容净化只留下正文和代码归档质量高很多。2. 最基础的方法浏览器打印功能如果你只是偶尔导出一两篇完全不需要装任何额外软件。现在的主流浏览器Chrome、Edge、Firefox都内置了另存为PDF的能力本质上是一个虚拟打印机。这个方法最大的优点是零成本、无依赖缺点是默认设置下排版效果只能算能用不能算好看。2.1 操作步骤打开目标文章页按快捷键 CtrlPmacOS 是 CommandP下同进入打印预览界面。在目标打印机里选择另存为PDF然后在左侧设置里做这几件事布局选择纵向文章正文本身是纵向的横向打印会浪费大量页面空白。纸张尺寸选A4如果不需要实体打印的话这个参数其实无所谓但A4最通用后续放到平板或手机上阅读比例也正常。边距选择默认暂时不动后面如果发现页边距浪费严重再用CSS调。勾选背景图形选项这个非常关键。CSDN的代码块有浅灰色底色正文里也有不少背景高亮不勾选的话这些区域导出后会变成纯白一片层次感全没了。取消勾选页眉和页脚否则每页顶部底部会插入网页标题、日期、链接地址看起来非常啰嗦。设置完成后点击保存选个目录导出就行。这是最直接的方案但实际效果大概率有两个问题文章内容前后可能混入侧边栏信息、最近访客列表、点赞收藏按钮等页面元素代码块如果超出页面宽度会被直接截断而不是换行。2.2 页面元素的干扰问题CSDN的文章页结构可以分为几个区域顶部导航栏、左侧博主信息栏、正文区、右侧推荐栏、底部版权和评论。直接打印时浏览器会把整个可视区域一起交给打印引擎所以左栏和右栏经常会被打到纸上不仅浪费空间还干扰阅读。解决这个问题的办法有两个粗暴一点的在打印前手动调整窗口大小把侧边栏挤出可视区更可靠的做法是在打印设置里选仅内容或者类似选项但遗憾的是Chrome和Edge针对不同网站的适配并不一致CSDN经常不生效。真正靠谱的做法见下一节用浏览器开发者工具临时注入CSS强制隐藏无关区域。这套操作大概多花30秒但出来的效果是一个清爽得多的文章页。2.3 打印预览里的细节检查在点击保存之前一定要在预览模式里翻几页检查。重点看三处图片是否加载完整、代码块是否出现...或横向滚动、表格是否被挤变形。如果发现图片区域是空白大概率是因为图片懒加载机制——文章图片在进入可视区之后才真正加载而打印引擎直接抓取页面时不一定会触发这个过程。解决办法很简单在打开文章页面后先用鼠标从页顶滚动到页底等图片都加载完再按CtrlP导出。3. 进阶方案用CSS打印样式精修排版前面讲了直接打印的局限性下面这个方法我用得最多也是最推荐的。原理不复杂在浏览器里临时覆盖页面样式把不需要的元素隐藏把跟打印相关的样式强制改掉然后再用打印功能导出。这样出来的PDF干净得多代码块也更完整。3.1 临时注入自定义CSS以Chrome为例打开文章页面后按F12进入开发者工具找到Console控制台面板然后把CSS代码贴在console里执行。为什么不用Elements面板里的Style编辑器因为Console里可以一次性粘贴多行样式并且用document.styleSheets或者直接创建style标签操作更快。常用的隐藏规则如下// 在控制台粘贴执行然后按CtrlP导出 var style document.createElement(style); style.innerHTML /* 隐藏顶栏、侧边栏、推荐区、底部工具和版权 */ #header, #asideProfile, .toolbox-list, .recommend-box, .article-copyright, .more-toolbox, .person-info-bottom, .csdn-side-toolbar, .blog-footer-bottom, .hide-article-box { display: none !important; } /* 正文区拉宽 */ #mainBox, .main-content { width: 100% !important; max-width: 100% !important; margin: 0 !important; } /* 隐藏博客标题区域下方的统计等信息 */ .article-info-box, .up-time, .read-count { display: none !important; } /* 代码块处理允许换行而不是截断 */ pre, code { white-space: pre-wrap !important; word-wrap: break-word !important; } /* 调整基础字体大小方便阅读 */ body { font-size: 14px !important; } ; document.head.appendChild(style); console.log(样式注入完成可以CtrlP导出了);这段CSS是我从多次翻车经历里提炼出来的隐藏掉的主要是页面装饰性元素对正文几乎没有影响。需要注意的是CSDN前端升级过几次class类名发生过变化如果你执行后某些区域还在可以右键点击那个区域选择检查然后在Elements面板里找到对应的class名自己加一条隐藏规则思路是通的。3.2 打印样式和屏幕样式的区别你可能好奇为什么不直接在浏览器的打印设置里调整而要费劲去改CSS原因是打印设置能调的维度很有限只有纸张、边距、缩放这些基础参数而CSS可以控制每个元素的显示与隐藏、字号大小、颜色替换、甚至强制分页。这在处理长文章时特别有用。比如你希望每个一级标题单独起一页可以在CSS里加h1, h2 { page-break-after: avoid; }page-break-after: avoid的意思是标题后面不要紧跟分页符避免出现标题在页面最底部、正文从下页开始的情况。打印样式和屏幕样式本来就是两套逻辑浏览器虽然默认会把屏幕样式应用到打印但我们完全可以在打印前临时覆盖实现屏幕上看一套、打印出来另一套的效果。这也是导出PDF时最值得花时间研究的方向。3.3 代码块的完美输出策略CSDN文章最核心的价值就是代码块。但代码块恰恰是导出PDF时最容易翻车的地方——稍微长一点的行就会被截断或者出现横向滚动条在打印页面上表现为代码被砍掉一截。解决办法前面CSS里已经给了核心是white-space: pre-wrap也就是保留空格和换行格式但允许在超出边界时自动折行。这个属性在屏幕上看代码习惯无关紧要但对打印至关重要。另外还要处理代码块颜色。CSDN默认代码高亮是在浅灰背景上做彩色字体导出黑白的PDF时彩色会变成不同程度的灰有时对比度很差。如果你用的是支持CSS的PDF导出方式可以临时把代码颜色改成统一深灰色在刚才注入的CSS里加一句.hljs, pre code { color: #333 !important; background: #f5f5f5 !important; }这样打印出来是干净的黑字灰底即使不勾选背景图形也能看清层级。我是习惯勾选背景图形的因为文章里的自定义高亮块、提示框之类也需要背景色区分。两者不冲突可以同时用。4. 批量导出和自动化适合专栏备份的场景如果说单篇文章导出是手工活那么想把一个专栏甚至整个博客的文章全部变成PDF就要考虑自动化了。我自己的第一个自动化脚本是用Python写的当时想把某个系列教程整体离线下来逐篇手工导出太不现实。但这里要先提个醒批量抓取任何网站的内容都要遵守目标网站的robots协议和服务条款一般仅供个人学习和备份不要大量爬取后二次传播更不要用来做商业用途。下面分享的是个人备份场景下的技术思路。4.1 方案一Python Requests pdfkit这是最经典的组合拳。用Requests拿到文章页面的HTML再用BeautifulSoup提取标题和正文最后通过pdfkit把HTML转成PDF。整个流程大概这样import requests from bs4 import BeautifulSoup import pdfkit # 配置请求头模拟浏览器访问 headers { User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/120.0.0.0 Safari/537.36 } url 这里填文章URL resp requests.get(url, headersheaders, timeout10) soup BeautifulSoup(resp.text, html.parser) # 提取标题 title soup.find(h1).get_text(stripTrue) # 提取正文容器class名以实际页面为准 article soup.find(div, class_article_content) # 清理不需要的脚本和样式 for tag in article.find_all([script, style]): tag.decompose() # 用一个简单模板包一层指定中文字体 html_template f !DOCTYPE html html langzh-CN head meta charsetutf-8 style body {{ font-family: Microsoft YaHei, PingFang SC, sans-serif; line-height: 1.7; margin: 40px; }} pre {{ white-space: pre-wrap; word-wrap: break-word; background: #f5f5f5; padding: 12px; }} /style /head body h1{title}/h1 {article} /body /html pdfkit.from_string(html_template, f{title}.pdf)在使用之前需要安装pdfkit库并且下载wkhtmltopdf这个系统工具因为pdfkit本质上是调它的命令行。Windows下记得把wkhtmltopdf的安装路径加到系统PATH里否则会报找不到可执行文件的错误。这个方案能跑通但有几个隐藏坑一是CSDN的正文里有部分动态加载的内容用Requests直接拿HTML时可能不包含比如某些通过JavaScript异步渲染的图片二是文章里如果包含公式或者特殊富文本还原度不一定好。总体而言适合那些结构比较简单、以文字和代码为主的教程文章。4.2 方案二借助浏览器自动化工具如果你对编程不熟或者觉得Python的方案太折腾还有一个更笨但更稳的办法用浏览器自动化工具模拟人工操作逐篇打开文章、触发打印、保存PDF。我经常用这种方式处理一些来源比较复杂、非CSDN但结构类似的网页。主流工具包括Selenium和Playwright。Playwright是微软维护的API设计得比Selenium人性化很多也内置了PDF打印能力代码大致是这样from playwright.sync_api import sync_playwright with sync_playwright() as p: browser p.chromium.launch() page browser.new_page() page.goto(https://blog.csdn.net/你的文章URL) # 等待页面懒加载的图片完全加载 page.wait_for_timeout(3000) # 模拟滚动触发图片加载 for i in range(10): page.mouse.wheel(0, 2000) page.wait_for_timeout(500) # 直接调用PDF打印 page.pdf( pathoutput.pdf, formatA4, print_backgroundTrue, margin{top: 20mm, bottom: 20mm, left: 15mm, right: 15mm} ) browser.close()Playwright的好处是它会真正驱动一个浏览器内核页面的JavaScript、懒加载、异步请求都会正常执行渲染结果和人工用浏览器看到的几乎一致。缺点是需要安装浏览器驱动第一次使用会下载一个Chromium实例。不过对于批量备份需求来说这个方案是我实测下来成功率最高的。4.3 关于批量导出的合规建议再次强调一下个人备份自己的文章或者备份那种明确允许转载的文章问题不大但不要拿别人的大量文章去做站、做公众号素材或者打包售卖。CSDN平台本身有反爬机制如果你用脚本高频抓取很容易触发验证码或者IP封锁。我的建议是控制请求频率每抓完一篇sleep几秒并且尽量避开网站访问高峰。这也是一个程序员之间彼此尊重的基本素养。5. 常见问题与排查技巧实录我做PDF导出的过程中踩过不少坑有些问题第一次遇到的时候查了很久才找到原因。这里整理成速查表配合具体解决思路方便大家直接对照。问题现象根本原因解决方案代码块出现省略号或横向滚动条代码容器设置了overflow: hidden或white-space: nowrap注入CSS将white-space改为pre-wrap正文里图片全部空白图片懒加载机制打印引擎没有触发滚动加载先手动滚动页面到底再按CtrlP页眉页脚带链接地址和日期浏览器的打印设置默认开启了页眉页脚打印设置里取消页眉和页脚左栏右栏被打印进PDF页面布局使用双栏未隐藏侧边栏用开发者工具隐藏对应的容器元素中文字体显示为方块浏览器打印字体映射问题多出现在Linux环境安装中文字体或在CSS中指定系统字体数学公式变成奇怪的字符公式可能依赖MathJax动态渲染等待页面全部渲染后再打印或导出前刷新一次页数过多浪费纸张边距设置过宽、字体偏大调整打印边距为窄或者用CSS缩小正文字号表格列窄内容被挤到换行表格布局为响应式在打印宽度下自动压缩在CSS中设置表格宽度为固定值或white-space: nowrap打印预览正常导出后样式丢失浏览器对某些CSS属性的打印支持不同换成Chrome或Edge最新版避免用老版Firefox5.1 代码块截断问题这个问题我反复遇到所以单独拎出来说。CSDN的代码块从上到下分别有行号、代码文本、复制按钮等多个元素实际打印时行号列可能和其他区域错位。除了设置white-space: pre-wrap还要注意代码块容器本身是否设置了固定高度。如果设置了固定高度打印时会强制截断内容。排查方法是在Elements面板里选中代码块看看style里有没有height或者max-height有的话在注入CSS里覆盖成auto。5.2 图片加载不完整CSDN的图片是走CDN的加载机制是懒加载加渐近式渲染。如果你打开文章后立即按CtrlP很可能图片还没完全下载打印引擎在抓取截图时拿到的是一张半截图或空白占位符。解决技巧是在页面里用window.scrollTo(0, document.body.scrollHeight)强制滚动到底再滚回顶部重复两三次然后等一两秒再打印。这个动作我在自动化脚本里也保留了实测能把图片丢失率降到很低。5.3 数学公式的处理CSDN部分文章会嵌入数学公式通过MathJax或KaTeX渲染。如果你的文章里有大量公式直接打印有时会发现公式变成了一堆源码比如\frac{a}{b}或者乱码。这是因为打印时机在公式渲染完成之前。对策是打印前手动刷新页面等待公式区域出现可读的渲染结果后再保存PDF。如果是自动化脚本可以用page.wait_for_selector(.MathJax)或者等待固定时间来规避。5.4 打印预览速度慢文章很长时打印预览可能要等十几秒甚至更久这是浏览器在重排页面和预计算分页属正常现象。但我遇到过一种假死情况预览一直转圈最后提示无法预览。原因是页面里面有一个特别大的背景图或者动画元素。解决方法是把文章页的动画类元素也临时隐藏比如animation: none !important; transition: none !important;这类样式全局注入不影响阅读。6. 一些日常使用的补充技巧6.1 如何对导出的PDF做二次处理有时候导出的PDF还是不太满意比如页边距太大、某些页背景色不够深、内容里混进了无关片段。这时候不一定要重新导出可以使用桌面端PDF编辑器直接修改。Windows里Edge自带的PDF阅读器就能做基础标注正经处理的话我用过Adobe Acrobat和国产的福昕PDF编辑器两者都能裁剪页面、调整页面顺序、添加页眉页脚。只想快速去掉某页内容或者裁剪白边的在线PDF工具也能搞定但涉及隐私内容时我不推荐传网上去。6.2 导出PDF和复制Markdown怎么选如果你想备份的是自己写的文章其实还有一个更好的方案直接从CSDN的Markdown编辑器里复制原始Markdown源码自己存一个.md文件。这样未来想改排版、想发到别的平台、想放进自己的博客系统都极其方便。PDF的优势是排版已固定适合分享和归档Markdown的优势是内容可编辑、可扩展。我的习惯是两套都存——Markdown作为源文件PDF作为定稿。如果你在后台写文章编辑器顶部的Markdown源码按钮点开全选复制即可。6.3 个人推荐的导出流程为了不让你看完文章还在纠结选哪种方法我直接给一个决策路径只存一篇用第2节的浏览器直接打印配合第3节的CSS注入效果完全够用。有几篇想存但不是特别多用第3节的方案边看边存保留人工检查的能力。整个专栏要整体备份用第4.2节的Playwright方案写成脚本循环处理文章链接列表。自己写的文章同时保留Markdown源文件把PDF当导出物。这套流程我用了差不多一年还算顺手。工具本身没有绝对的好坏能满足你的备份目的和阅读习惯的就是好方案。最后分享一个我自己的习惯导出的PDF文件按日期-标题-来源的格式命名比如2025-06-01-深入理解Linux网络协议栈-CSDN.pdf。时间久了你会发现这个前缀太重要了检索和排重都特别方便。也建议定期把这些PDF同步到云端网盘或者本地NAS万一笔记本硬盘出问题至少这些年存的阅读资料还在。技术资料这种东西存的时候觉得占地方真到用的时候才发现找不到才是最难受的。希望这篇经验能帮你少踩几个坑一次性导出满意的PDF。
在CSDN上写博客的人应该都经历过这种场景翻到一篇特别好的技术文章随手就存了书签结果过段时间再点开提示文章已删除或者博主改名了。更常见的是自己辛辛苦苦写的文章想留个排版固定、不会被平台改版影响的版本或者想把别人写的内容离线存一份慢慢研究。我自己的习惯是只要觉得某篇文章值得二刷就顺手导出一份PDF丢进本地文件夹做笔记方便也完全不担心哪天链接失效。CSDN文章导出PDF这件事听起来很简单浏览器自带的打印功能都能做但做出来的效果往往惨不忍睹左侧导航栏被打印进去、代码块被截断、图片不加载、页眉页脚乱入。我前前后后折腾了两三年换过各种工具和方法今天把踩过的坑和验证过的方案一次性整理清楚。文章会从最简单的浏览器打印讲起然后到如何用CSS微调排版最后聊聊适合批量场景的脚本方案。不管你是只想偶尔存一篇还是想系统性备份整个专栏都能找到对应的办法。1. 为什么非要存成PDF在线文章的三个痛点在动手之前先聊清楚动机。很多人觉得PDF导出是个伪需求浏览器收藏夹不也能存文章吗但真正在CSDN写过和读过大量文章的人大概率都遇到过下面这些情况。1.1 在线内容的易失性CSDN上不少优质文章是博主自己沉淀多年的笔记但平台的运营规则、博主的个人意愿都会影响文章是否长期在线。我有几篇看了好几遍的硬件调试文章就是某天突然变成博主已删除该文章连缓存都来不及找。这种事碰上几次就会养成随手备份的习惯。PDF不是唯一方案但在通用性、可阅读性和排版稳定性上综合体验最好。1.2 离线阅读和标注需求通勤路上、飞机上、或者网速不稳定的环境里在线网页的体验并不好。PDF导出后可以扔进手机和平板用自带的阅读器就能打开还能直接在上面写写画画。尤其是一些代码量大、逻辑链条长的文章手写标注比来回滚动网页效率高得多。我自己常用微软的Edge阅读器做批注比浏览器看网页舒服太多。1.3 知识管理归档需要如果你用OneNote、印象笔记或者本地Obsidian做知识库PDF是一种非常方便的归档格式。它可以保留原始排版不会被编辑器语法转换弄乱同时检索也很方便Windows和macOS的搜索都能直接搜PDF里的文字。CSDN的文章页面元素太杂直接打印成PDF相当于做了一次内容净化只留下正文和代码归档质量高很多。2. 最基础的方法浏览器打印功能如果你只是偶尔导出一两篇完全不需要装任何额外软件。现在的主流浏览器Chrome、Edge、Firefox都内置了另存为PDF的能力本质上是一个虚拟打印机。这个方法最大的优点是零成本、无依赖缺点是默认设置下排版效果只能算能用不能算好看。2.1 操作步骤打开目标文章页按快捷键 CtrlPmacOS 是 CommandP下同进入打印预览界面。在目标打印机里选择另存为PDF然后在左侧设置里做这几件事布局选择纵向文章正文本身是纵向的横向打印会浪费大量页面空白。纸张尺寸选A4如果不需要实体打印的话这个参数其实无所谓但A4最通用后续放到平板或手机上阅读比例也正常。边距选择默认暂时不动后面如果发现页边距浪费严重再用CSS调。勾选背景图形选项这个非常关键。CSDN的代码块有浅灰色底色正文里也有不少背景高亮不勾选的话这些区域导出后会变成纯白一片层次感全没了。取消勾选页眉和页脚否则每页顶部底部会插入网页标题、日期、链接地址看起来非常啰嗦。设置完成后点击保存选个目录导出就行。这是最直接的方案但实际效果大概率有两个问题文章内容前后可能混入侧边栏信息、最近访客列表、点赞收藏按钮等页面元素代码块如果超出页面宽度会被直接截断而不是换行。2.2 页面元素的干扰问题CSDN的文章页结构可以分为几个区域顶部导航栏、左侧博主信息栏、正文区、右侧推荐栏、底部版权和评论。直接打印时浏览器会把整个可视区域一起交给打印引擎所以左栏和右栏经常会被打到纸上不仅浪费空间还干扰阅读。解决这个问题的办法有两个粗暴一点的在打印前手动调整窗口大小把侧边栏挤出可视区更可靠的做法是在打印设置里选仅内容或者类似选项但遗憾的是Chrome和Edge针对不同网站的适配并不一致CSDN经常不生效。真正靠谱的做法见下一节用浏览器开发者工具临时注入CSS强制隐藏无关区域。这套操作大概多花30秒但出来的效果是一个清爽得多的文章页。2.3 打印预览里的细节检查在点击保存之前一定要在预览模式里翻几页检查。重点看三处图片是否加载完整、代码块是否出现...或横向滚动、表格是否被挤变形。如果发现图片区域是空白大概率是因为图片懒加载机制——文章图片在进入可视区之后才真正加载而打印引擎直接抓取页面时不一定会触发这个过程。解决办法很简单在打开文章页面后先用鼠标从页顶滚动到页底等图片都加载完再按CtrlP导出。3. 进阶方案用CSS打印样式精修排版前面讲了直接打印的局限性下面这个方法我用得最多也是最推荐的。原理不复杂在浏览器里临时覆盖页面样式把不需要的元素隐藏把跟打印相关的样式强制改掉然后再用打印功能导出。这样出来的PDF干净得多代码块也更完整。3.1 临时注入自定义CSS以Chrome为例打开文章页面后按F12进入开发者工具找到Console控制台面板然后把CSS代码贴在console里执行。为什么不用Elements面板里的Style编辑器因为Console里可以一次性粘贴多行样式并且用document.styleSheets或者直接创建style标签操作更快。常用的隐藏规则如下// 在控制台粘贴执行然后按CtrlP导出 var style document.createElement(style); style.innerHTML /* 隐藏顶栏、侧边栏、推荐区、底部工具和版权 */ #header, #asideProfile, .toolbox-list, .recommend-box, .article-copyright, .more-toolbox, .person-info-bottom, .csdn-side-toolbar, .blog-footer-bottom, .hide-article-box { display: none !important; } /* 正文区拉宽 */ #mainBox, .main-content { width: 100% !important; max-width: 100% !important; margin: 0 !important; } /* 隐藏博客标题区域下方的统计等信息 */ .article-info-box, .up-time, .read-count { display: none !important; } /* 代码块处理允许换行而不是截断 */ pre, code { white-space: pre-wrap !important; word-wrap: break-word !important; } /* 调整基础字体大小方便阅读 */ body { font-size: 14px !important; } ; document.head.appendChild(style); console.log(样式注入完成可以CtrlP导出了);这段CSS是我从多次翻车经历里提炼出来的隐藏掉的主要是页面装饰性元素对正文几乎没有影响。需要注意的是CSDN前端升级过几次class类名发生过变化如果你执行后某些区域还在可以右键点击那个区域选择检查然后在Elements面板里找到对应的class名自己加一条隐藏规则思路是通的。3.2 打印样式和屏幕样式的区别你可能好奇为什么不直接在浏览器的打印设置里调整而要费劲去改CSS原因是打印设置能调的维度很有限只有纸张、边距、缩放这些基础参数而CSS可以控制每个元素的显示与隐藏、字号大小、颜色替换、甚至强制分页。这在处理长文章时特别有用。比如你希望每个一级标题单独起一页可以在CSS里加h1, h2 { page-break-after: avoid; }page-break-after: avoid的意思是标题后面不要紧跟分页符避免出现标题在页面最底部、正文从下页开始的情况。打印样式和屏幕样式本来就是两套逻辑浏览器虽然默认会把屏幕样式应用到打印但我们完全可以在打印前临时覆盖实现屏幕上看一套、打印出来另一套的效果。这也是导出PDF时最值得花时间研究的方向。3.3 代码块的完美输出策略CSDN文章最核心的价值就是代码块。但代码块恰恰是导出PDF时最容易翻车的地方——稍微长一点的行就会被截断或者出现横向滚动条在打印页面上表现为代码被砍掉一截。解决办法前面CSS里已经给了核心是white-space: pre-wrap也就是保留空格和换行格式但允许在超出边界时自动折行。这个属性在屏幕上看代码习惯无关紧要但对打印至关重要。另外还要处理代码块颜色。CSDN默认代码高亮是在浅灰背景上做彩色字体导出黑白的PDF时彩色会变成不同程度的灰有时对比度很差。如果你用的是支持CSS的PDF导出方式可以临时把代码颜色改成统一深灰色在刚才注入的CSS里加一句.hljs, pre code { color: #333 !important; background: #f5f5f5 !important; }这样打印出来是干净的黑字灰底即使不勾选背景图形也能看清层级。我是习惯勾选背景图形的因为文章里的自定义高亮块、提示框之类也需要背景色区分。两者不冲突可以同时用。4. 批量导出和自动化适合专栏备份的场景如果说单篇文章导出是手工活那么想把一个专栏甚至整个博客的文章全部变成PDF就要考虑自动化了。我自己的第一个自动化脚本是用Python写的当时想把某个系列教程整体离线下来逐篇手工导出太不现实。但这里要先提个醒批量抓取任何网站的内容都要遵守目标网站的robots协议和服务条款一般仅供个人学习和备份不要大量爬取后二次传播更不要用来做商业用途。下面分享的是个人备份场景下的技术思路。4.1 方案一Python Requests pdfkit这是最经典的组合拳。用Requests拿到文章页面的HTML再用BeautifulSoup提取标题和正文最后通过pdfkit把HTML转成PDF。整个流程大概这样import requests from bs4 import BeautifulSoup import pdfkit # 配置请求头模拟浏览器访问 headers { User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/120.0.0.0 Safari/537.36 } url 这里填文章URL resp requests.get(url, headersheaders, timeout10) soup BeautifulSoup(resp.text, html.parser) # 提取标题 title soup.find(h1).get_text(stripTrue) # 提取正文容器class名以实际页面为准 article soup.find(div, class_article_content) # 清理不需要的脚本和样式 for tag in article.find_all([script, style]): tag.decompose() # 用一个简单模板包一层指定中文字体 html_template f !DOCTYPE html html langzh-CN head meta charsetutf-8 style body {{ font-family: Microsoft YaHei, PingFang SC, sans-serif; line-height: 1.7; margin: 40px; }} pre {{ white-space: pre-wrap; word-wrap: break-word; background: #f5f5f5; padding: 12px; }} /style /head body h1{title}/h1 {article} /body /html pdfkit.from_string(html_template, f{title}.pdf)在使用之前需要安装pdfkit库并且下载wkhtmltopdf这个系统工具因为pdfkit本质上是调它的命令行。Windows下记得把wkhtmltopdf的安装路径加到系统PATH里否则会报找不到可执行文件的错误。这个方案能跑通但有几个隐藏坑一是CSDN的正文里有部分动态加载的内容用Requests直接拿HTML时可能不包含比如某些通过JavaScript异步渲染的图片二是文章里如果包含公式或者特殊富文本还原度不一定好。总体而言适合那些结构比较简单、以文字和代码为主的教程文章。4.2 方案二借助浏览器自动化工具如果你对编程不熟或者觉得Python的方案太折腾还有一个更笨但更稳的办法用浏览器自动化工具模拟人工操作逐篇打开文章、触发打印、保存PDF。我经常用这种方式处理一些来源比较复杂、非CSDN但结构类似的网页。主流工具包括Selenium和Playwright。Playwright是微软维护的API设计得比Selenium人性化很多也内置了PDF打印能力代码大致是这样from playwright.sync_api import sync_playwright with sync_playwright() as p: browser p.chromium.launch() page browser.new_page() page.goto(https://blog.csdn.net/你的文章URL) # 等待页面懒加载的图片完全加载 page.wait_for_timeout(3000) # 模拟滚动触发图片加载 for i in range(10): page.mouse.wheel(0, 2000) page.wait_for_timeout(500) # 直接调用PDF打印 page.pdf( pathoutput.pdf, formatA4, print_backgroundTrue, margin{top: 20mm, bottom: 20mm, left: 15mm, right: 15mm} ) browser.close()Playwright的好处是它会真正驱动一个浏览器内核页面的JavaScript、懒加载、异步请求都会正常执行渲染结果和人工用浏览器看到的几乎一致。缺点是需要安装浏览器驱动第一次使用会下载一个Chromium实例。不过对于批量备份需求来说这个方案是我实测下来成功率最高的。4.3 关于批量导出的合规建议再次强调一下个人备份自己的文章或者备份那种明确允许转载的文章问题不大但不要拿别人的大量文章去做站、做公众号素材或者打包售卖。CSDN平台本身有反爬机制如果你用脚本高频抓取很容易触发验证码或者IP封锁。我的建议是控制请求频率每抓完一篇sleep几秒并且尽量避开网站访问高峰。这也是一个程序员之间彼此尊重的基本素养。5. 常见问题与排查技巧实录我做PDF导出的过程中踩过不少坑有些问题第一次遇到的时候查了很久才找到原因。这里整理成速查表配合具体解决思路方便大家直接对照。问题现象根本原因解决方案代码块出现省略号或横向滚动条代码容器设置了overflow: hidden或white-space: nowrap注入CSS将white-space改为pre-wrap正文里图片全部空白图片懒加载机制打印引擎没有触发滚动加载先手动滚动页面到底再按CtrlP页眉页脚带链接地址和日期浏览器的打印设置默认开启了页眉页脚打印设置里取消页眉和页脚左栏右栏被打印进PDF页面布局使用双栏未隐藏侧边栏用开发者工具隐藏对应的容器元素中文字体显示为方块浏览器打印字体映射问题多出现在Linux环境安装中文字体或在CSS中指定系统字体数学公式变成奇怪的字符公式可能依赖MathJax动态渲染等待页面全部渲染后再打印或导出前刷新一次页数过多浪费纸张边距设置过宽、字体偏大调整打印边距为窄或者用CSS缩小正文字号表格列窄内容被挤到换行表格布局为响应式在打印宽度下自动压缩在CSS中设置表格宽度为固定值或white-space: nowrap打印预览正常导出后样式丢失浏览器对某些CSS属性的打印支持不同换成Chrome或Edge最新版避免用老版Firefox5.1 代码块截断问题这个问题我反复遇到所以单独拎出来说。CSDN的代码块从上到下分别有行号、代码文本、复制按钮等多个元素实际打印时行号列可能和其他区域错位。除了设置white-space: pre-wrap还要注意代码块容器本身是否设置了固定高度。如果设置了固定高度打印时会强制截断内容。排查方法是在Elements面板里选中代码块看看style里有没有height或者max-height有的话在注入CSS里覆盖成auto。5.2 图片加载不完整CSDN的图片是走CDN的加载机制是懒加载加渐近式渲染。如果你打开文章后立即按CtrlP很可能图片还没完全下载打印引擎在抓取截图时拿到的是一张半截图或空白占位符。解决技巧是在页面里用window.scrollTo(0, document.body.scrollHeight)强制滚动到底再滚回顶部重复两三次然后等一两秒再打印。这个动作我在自动化脚本里也保留了实测能把图片丢失率降到很低。5.3 数学公式的处理CSDN部分文章会嵌入数学公式通过MathJax或KaTeX渲染。如果你的文章里有大量公式直接打印有时会发现公式变成了一堆源码比如\frac{a}{b}或者乱码。这是因为打印时机在公式渲染完成之前。对策是打印前手动刷新页面等待公式区域出现可读的渲染结果后再保存PDF。如果是自动化脚本可以用page.wait_for_selector(.MathJax)或者等待固定时间来规避。5.4 打印预览速度慢文章很长时打印预览可能要等十几秒甚至更久这是浏览器在重排页面和预计算分页属正常现象。但我遇到过一种假死情况预览一直转圈最后提示无法预览。原因是页面里面有一个特别大的背景图或者动画元素。解决方法是把文章页的动画类元素也临时隐藏比如animation: none !important; transition: none !important;这类样式全局注入不影响阅读。6. 一些日常使用的补充技巧6.1 如何对导出的PDF做二次处理有时候导出的PDF还是不太满意比如页边距太大、某些页背景色不够深、内容里混进了无关片段。这时候不一定要重新导出可以使用桌面端PDF编辑器直接修改。Windows里Edge自带的PDF阅读器就能做基础标注正经处理的话我用过Adobe Acrobat和国产的福昕PDF编辑器两者都能裁剪页面、调整页面顺序、添加页眉页脚。只想快速去掉某页内容或者裁剪白边的在线PDF工具也能搞定但涉及隐私内容时我不推荐传网上去。6.2 导出PDF和复制Markdown怎么选如果你想备份的是自己写的文章其实还有一个更好的方案直接从CSDN的Markdown编辑器里复制原始Markdown源码自己存一个.md文件。这样未来想改排版、想发到别的平台、想放进自己的博客系统都极其方便。PDF的优势是排版已固定适合分享和归档Markdown的优势是内容可编辑、可扩展。我的习惯是两套都存——Markdown作为源文件PDF作为定稿。如果你在后台写文章编辑器顶部的Markdown源码按钮点开全选复制即可。6.3 个人推荐的导出流程为了不让你看完文章还在纠结选哪种方法我直接给一个决策路径只存一篇用第2节的浏览器直接打印配合第3节的CSS注入效果完全够用。有几篇想存但不是特别多用第3节的方案边看边存保留人工检查的能力。整个专栏要整体备份用第4.2节的Playwright方案写成脚本循环处理文章链接列表。自己写的文章同时保留Markdown源文件把PDF当导出物。这套流程我用了差不多一年还算顺手。工具本身没有绝对的好坏能满足你的备份目的和阅读习惯的就是好方案。最后分享一个我自己的习惯导出的PDF文件按日期-标题-来源的格式命名比如2025-06-01-深入理解Linux网络协议栈-CSDN.pdf。时间久了你会发现这个前缀太重要了检索和排重都特别方便。也建议定期把这些PDF同步到云端网盘或者本地NAS万一笔记本硬盘出问题至少这些年存的阅读资料还在。技术资料这种东西存的时候觉得占地方真到用的时候才发现找不到才是最难受的。希望这篇经验能帮你少踩几个坑一次性导出满意的PDF。
机制详解与性能对比)
