如何打印指定的div(无需手动禁用页面上的所有其他内容)?
我想要避免一个新的预览对话框,所以用这个内容创建一个新窗口是没有用的。
该页面包含了几个表格,其中一个包含了我想打印的div -表格是用web的视觉样式设计的,不应该显示在打印中。
如何打印指定的div(无需手动禁用页面上的所有其他内容)?
我想要避免一个新的预览对话框,所以用这个内容创建一个新窗口是没有用的。
该页面包含了几个表格,其中一个包含了我想打印的div -表格是用web的视觉样式设计的,不应该显示在打印中。
当前回答
桑德罗的方法很有效。
我对它进行了调整,以允许多个printMe链接,特别是在选项卡页面和扩展文本中使用。
function processPrint(printMe){<——在这里调用一个变量
var printReadyElem = document.getElementById(printMe);<——删除了printMe周围的引号以请求一个变量
< a href = " javascript:无效(processPrint (' divID '));>Print</a> <——将要打印的div ID传递到函数上,将printMe变量转换为div ID。需要单引号
其他回答
桑德罗的方法很有效。
我对它进行了调整,以允许多个printMe链接,特别是在选项卡页面和扩展文本中使用。
function processPrint(printMe){<——在这里调用一个变量
var printReadyElem = document.getElementById(printMe);<——删除了printMe周围的引号以请求一个变量
< a href = " javascript:无效(processPrint (' divID '));>Print</a> <——将要打印的div ID传递到函数上,将printMe变量转换为div ID。需要单引号
使用特殊的样式表进行打印
<link rel="stylesheet" href="print.css" type="text/css" media="print" />
然后添加一个类,即。"noprint"到每个你不想打印的内容的标签。
在CSS中使用
.noprint {
display: none;
}
我尝试了提供的许多解决方案。没有一个是完美的。它们要么丢失CSS,要么不能在所有浏览器中工作。我找到了一个完美而简单的解决方案,既不丢失CSS,也适用于所有浏览器。
Html
<div class="row" id="print-div">
Your html
</div>
打印稿
let popupWin = window.open('', '_blank', 'width=1080,height=595');
let printContents = document.getElementById("print-div").innerHTML;
let printHead = document.head.innerHTML;
popupWin.document
.write(`<html>
${printHead}
<body onload="window.print();">${printContents}</body></html>`);
popupWin.document.close();
您是否可以使用打印样式表,并使用CSS来排列想要打印的内容?阅读这篇文章获取更多的建议。
没有CSS小丑,html和纯javascript与iframe工作最好。然后只需点击文本,你想打印。带有文本内容的id元素的当前示例;
html的身体:
<div id="monitor" onclick="idElementPrint()">text i want to print</div>
纯javascript:
//or: monitor.textContent = "click me to print textual content";
const idElementPrint = () => {
let ifram = document.createElement("iframe");
ifram.style = "display:none";
document.body.appendChild(ifram);
pri = ifram.contentWindow;
pri.document.open();
pri.document.write(monitor.textContent);
pri.document.close();
pri.focus();
pri.print();
}