工具

如何将csdn文章保存为pdf文件,存到本地,这里有妙招

看到不错的csdn文章,有时想保存到本地,除了保存完整网页外,能不能只把文章相关内容,保存到pdf文件呢?
还真有方法,下面来看看,很简单~
1、打开Chrome浏览器的开发者模式。

2、把下面代码段,复制粘贴到上面的地方,然后按Enter。(如果显示不能粘贴,则再次输入allow pasting,按Enter,表示允许粘贴操作)
(function() {    'use strict';
    // 1. 获取正文并移除内联样式限制    var content = document.querySelector('.article_content') || document.querySelector('#content_views') || document.querySelector('article');    if (content) content.removeAttribute('style');
    // 2. 展开"阅读全文"按钮    var readmore = document.getElementById('btn-readmore');    if (readmore) {        readmore.parentElement.remove();        var hiddenContent = document.querySelector('.article_content_hidden');        if (hiddenContent) hiddenContent.classList.remove('article_content_hidden');    }
    // 3. 展开折叠的代码块    document.querySelectorAll('.hide-preCode-box').forEach(function(el) { el.remove(); });    document.querySelectorAll('pre.set-code-hide').forEach(function(el) { el.classList.remove('set-code-hide'); });
    // 4. 删除所有干扰元素(侧栏、广告、推荐、评论区)    var selectors = [        'aside', '#side', '.csdn-side-toolbar', '.template-box', '.blog-footer-bottom',        '.left-toolbox', '.toolbar-inside', '.comment-box', '.recommend-box',        '.more-toolbox', '.article-info-box', '.column-group-item', '.tool-box',        '.recommend-nps-box', '.skill-tree-box', '#copyright-box', '.blog-footer',        '.article-footer-box', '.tags-box', '.follow-box', '#dmp_ad',        '.pagination-box', '.recommend_advert', '.csdn-ad-ck', '.advert-wrap',        '.csdn-toolbar', '.blog-tip-box', '.right-container', '#rightAside',        '.left_fold', '.main_father > .left', '.main_father > .right'    ];    selectors.forEach(function(sel) {        document.querySelectorAll(sel).forEach(function(el) { el.remove(); });    });
    // 5. 核心:让主内容区占满页面宽度(解决内容被裁剪的关键)    var mainBox = document.querySelector('#mainBox, .main_father, main, .container');    if (mainBox) {        mainBox.style.cssText = 'width: 100% !important; max-width: 100% !important; flex: none !important; margin: 0 !important; padding: 10px !important;';    }
    // 6. 让正文容器宽屏显示    if (content) {        content.style.cssText = 'width: 100% !important; max-width: 100% !important; overflow: visible !important;';    }
    // 7. 页面缩放 85%(避免印刷时被截断,解决左右边缘缺失)    document.body.style.zoom = '0.85';
    // 8. 统一全局宽度    document.querySelectorAll('.main_father, .container, main').forEach(function(el) {        el.style.cssText = 'width: 100% !important; max-width: 100% !important;';    });
    // 提示用户打印设置    console.log('✅ 已清理页面,请在弹出的打印对话框中:');    console.log('   1. 边距 → 选"无"');    console.log('   2. 勾选"背景图形"');    console.log('   3. 取消"页眉和页脚"');    console.log('   4. 纸张 → A4');
    window.print();})();
3、输入上面代码段,按下Enter后,会跳到下面的界面。如下图所示,点击存储即可。

————————————————

我是小驰,
Camera技术做了十年,有些不一样的看法,
在这里慢慢聊。
欢迎扫码关注「小驰行动派」公众号 10 年Camera开发 | Camera技术干货 | 行业洞察 | Camera实战分享
小驰行动派公众号 扫一扫关注
分享到: 复制链接
← 上一篇 选Camera方向到底值不值?2026年岗位趋势分析 下一篇 → 采用v4l2loopback来实现 虚拟Camera

相关文章

推荐课程

想系统学习 Camera 开发?看看这些课程

评论 (0)

暂无评论,快来抢沙发吧