背景 :使用 edge浏览器 打印博客资料,出现内容被遮盖、纸张形状奇怪 等问题;换成谷歌浏览器打印同样出现该问题。
尝试:参考文章,在此基础上进行改进,满足可以✔保留内容不遮盖(使内容不会超出页面的边界)、✔修改页边距的、✔保留A4纸张大小,还✔保留代码的高亮。
解决 :谷歌浏览器中 F12 -》控制台输入: "允许粘贴"或"allow pasting" 后 回车 -》以下输入代码(可以直接选择以下 2.改进后的代码)-》跳出打印界面
1. 原始参考代码:
javascript
(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. 改进后的代码:
javascript
(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;
})();
ps:书籍的页边距2.5cm,一般打印页边距1.5-2cm。