其他 | 把 csdn 博客的内容导出成 pdf 文件
背景:使用 edge浏览器 打印博客资料,出现内容被遮盖、纸张形状奇怪 等问题;换成谷歌浏览器打印同样出现该问题。
尝试:参考文章,在此基础上进行改进,满足可以✔保留内容不遮盖(使内容不会超出页面的边界)、✔修改页边距的、✔保留A4纸张大小,还✔保留代码的高亮。
解决:谷歌浏览器中 F12 -》控制台输入: “允许粘贴”或“allow pasting” 后 回车 -》以下输入代码(可以直接选择以下 2.改进后的代码)-》跳出打印界面
1. 原始参考代码:
(function doPrint(){ 'use strict';var articleBox = $("div.article_content");articleBox.removeAttr("style");var head_str = ""; var foot_str = ""; var older = document.body.innerHTML; var title= document.getElementsByClassName('article-title-box')[0].innerHTML; var main_body = document.getElementsByClassName('article_content')[0].innerHTML;document.body.innerHTML = head_str + title + main_body + foot_str;$("#mainBox").width("100%");document.getElementsByTagName('body')[0].style.zoom=0.8; window.print();document.body.innerHTML = older;return false;
})();
2. 改进后的代码:
(function doPrint(){ 'use strict';var articleBox = $("div.article_content");articleBox.removeAttr("style");var older = document.body.innerHTML; var title = document.getElementsByClassName('article-title-box')[0].innerHTML; var main_body = document.getElementsByClassName('article_content')[0].innerHTML;// 收集当前页面的所有 <link rel="stylesheet"> 和 <style>var styles = "";document.querySelectorAll("link[rel='stylesheet'], style").forEach(function(node){styles += node.outerHTML;});// 打印专用样式,保留A4大小var printStyles = `<style>@page {size: A4; /* 指定纸张大小为 A4 */margin: 15mm; /* 页边距可调 */}body {zoom: 0.9; /* 页面整体缩放 */}pre, code {white-space: pre-wrap !important; }</style>`;var head_str = "<head>" + styles + printStyles + "</head><body>";var foot_str = "</body>";document.body.innerHTML = head_str + title + main_body + foot_str;window.print();document.body.innerHTML = older;return false;
})();
参考:如何将CSDN文章导出为pdf文件(清爽) - 知乎
ps:书籍的页边距2.5cm,一般打印页边距1.5-2cm。