如何打印指定的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。需要单引号
其他回答
试试这个:
function printElement($elem){
var $customPrintSection = document.getElementById('customPrintSection'),
$customPrintSectionCss = document.getElementById('customPrintSectionCss');
if ($customPrintSection){
$customPrintSection.remove();
}
if ($customPrintSectionCss){
$customPrintSectionCss.remove();
}
$customPrintSection = document.createElement('div');
$customPrintSection.id = 'customPrintSection';
$customPrintSectionCss = document.createElement('style');
$customPrintSectionCss.id = 'customPrintSectionCss';
document.body.appendChild($customPrintSection);
document.body.appendChild($customPrintSectionCss);
$customPrintSection.innerHTML = $elem.innerHTML;
$customPrintSectionCss.innerHTML = '@media screen { div#customPrintSection { display: none; } } @media print { body *:not(div#customPrintSection):not(div#customPrintSection *) { display: none; } div#customPrintSection a[href]:after { content: none !important; } }';
window.print();
$customPrintSection.remove();
$customPrintSectionCss.remove();
}
我喜欢这个解决方案，因为它不像css解决方案那样影响整个页面，它在一个特定的答案中使所有主体元素立即不可见。所以如果需要的话，祝你能打印整页。
我也更喜欢“display: none”方法而不是“visibility: hidden”方法，所以没有必要将可打印元素设置为绝对元素并将其对齐到左上角。但我想这是主观的。
最后，它真的打败了新的窗口方法。
打印特定Div或任何元素的最佳方法
printDiv("myDiv");
function printDiv(id){
var printContents = document.getElementById(id).innerHTML;
var originalContents = document.body.innerHTML;
document.body.innerHTML = printContents;
window.print();
document.body.innerHTML = originalContents;
}
我有一个用最少代码更好的解决方案。
把你的可打印部分放在一个div中，像这样的id:
<div id="printableArea">
<h1>Print me</h1>
</div>
<input type="button" onclick="printDiv('printableArea')" value="print a div!" />
然后添加一个事件，如onclick(如上所示)，并像上面所做的那样传递div的id。
现在让我们创建一个非常简单的javascript:
function printDiv(divName) {
var printContents = document.getElementById(divName).innerHTML;
var originalContents = document.body.innerHTML;
document.body.innerHTML = printContents;
window.print();
document.body.innerHTML = originalContents;
}
注意到这有多简单了吗?没有弹出窗口，没有新窗口，没有疯狂的样式，没有像jquery这样的JS库。真正复杂的解决方案(答案并不复杂，也不是我指的)的问题是，它永远不会在所有浏览器上转换，永远!如果您想让样式有所不同，可以按照选中的答案所示，将media属性添加到样式表链接(media="print")。
没有绒毛，重量很轻，很好用。
我尝试了提供的许多解决方案。没有一个是完美的。它们要么丢失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();
我拿起使用JavaScript的内容，并创建了一个窗口，我可以打印代替…
