// 打印方法
print() {
// 需要打印的局部区域赋予"print-wrap"的id
let el = document.getElementById("print-wrap");
let doc = document;
let body = doc.body || doc.getElementsByTagName("body")[0];
let printId = "print-" + Date.now();
// 创建无副作用的打印容器(因不确定页面的打印元素有无其它样式)
let content = doc.createElement("div");
content.id = printId;
// 样式控制与打印无关的元素隐藏
let style = doc.createElement("style");
style.innerHTML =
"body>#" +
printId +
"{display:none}@media print{body>:not(#" +
printId +
"){display:none !important}body>#" +
printId +
"{display:block;padding-top:1px}}";
content.innerHTML = el.outerHTML;
// console.log("el.outerHTML", el.outerHTML);
body.appendChild(style);
// 与style元素设置的样式相配合
// 把打印内容的元素添加到body(作为body的子元素,可用body的子选择器 '>' 控制打印样式)
body.appendChild(content);
setTimeout(() => {
window.print();
body.removeChild(content);
body.removeChild(style);
}, 20);
},
js中打印局部区域
于 2023-04-27 11:01:20 首次发布