一个 HTML 页面上的多个打印按钮，只打印某些部分？
Posted
技术标签:
【中文标题】一个 HTML 页面上的多个打印按钮，只打印某些部分？【英文标题】：Multiple Print buttons on one HTML page, only printing certain sections? 【发布时间】：2021-07-20 21:55:42 【问题描述】：我正在创建一个包含多个磁贴的页面，每个磁贴都有自己的打印按钮。单击打印按钮后，我只想显示要打印的磁贴中的内容。
I'm using @media print display:none any contents that are not in the tiles (which works), but the issue I'm having is each tile displays when a print button is selected.
是否可以使用多个@media 打印或隔离它们？如果不是，如何在@media print 中指示仅包含一个图块，基于哪个图块被单击打印？下面最终打印所有图块。
例子：
@media print
.noprint display:none;
<div class="noprint">
OTHER STUFF
</div>
<div class="printcard1" id=BM">
<a href="javascript:window.print()">PrintMe!</a>
-CONTENT-
</div>
<div class="printcard2" id=KM">
<a href="javascript:window.print()">PrintMe!</a>
-CONTENT-
</div>
等等等等
【问题讨论】：
【参考方案1】：我终于能够在同一页面上找到多个打印按钮的解决方案。想要分享以防其他人也在搜索中。
<script>
function printDiv1()
var divContents = document.getElementById("Tile1").innerhtml;
var a = window.open('', '', 'height=500, width=500');
a.document.write('<html>');
a.document.write('<body>');
a.document.write(divContents);
a.document.write('</body></html>');
a.document.close();
a.print();
function printDiv2()
var divContents = document.getElementById("Tile2").innerHTML;
var a = window.open('', '', 'height=500, width=500');
a.document.write('<html>');
a.document.write('<body>');
a.document.write(divContents);
a.document.write('</body></html>');
a.document.close();
a.print();
</script>
<div class="PrintRec1" id="Tile1">
CONTENTS
<input type="button" value="Print this Recipe" onclick="printDiv1()">
</div>
<div class="PrintRec2" id="Tile2">
CONTENTS
<input type="button" value="Print this Recipe" onclick="printDiv2()">
</div>
【讨论】：
以上是关于一个 HTML 页面上的多个打印按钮，只打印某些部分？的主要内容，如果未能解决你的问题，请参考以下文章