我的代码有问题,但我无法弄清楚我做错了什么。 我要做的是,当单击“打印”按钮时,在调用window.print()之前,动态填充“print”div,其中包含从“screen”div中提取的内容。 我曾经向我解释过这个
在您的身体标签中有两个主要子div。样式显示在@media屏幕下并隐藏在@media print下。样式显示在@media打印下并隐藏在@media屏幕下
这是我尝试的小提琴。任何帮助表示赞赏。
https://jsfiddle.net/59rphg1h/1/
<ul>
<li><b>No Print</b>..Don't print anything before the following search box</li>
<li><b>No Print</b>..No graphics, Ads or anything else before the search box and its results</li>
</ul>
<div id="print">
<div id="screen">
<form class="printForm">
<div id="printReady">
<div class="autocompleter">
<label> When you see a </label>
<input type=search placeholder="🔍 Search Box Type here, Then Click Print!" name="tryit" data-using="tryit">
<p class="content"> </p>
</div>
</div>
</form>
</div>
</div>
<input type="button" onClick="window.print();" value="Print this Recipe">
<script>
autocompleter.tryit = [
{
value: "Print this display too!",
label: "Type then Select...,",
desc: "<ol> <h3>When clicked print, how can I:</h3> <li> keep List for print, and eliminate everything else on the page?</li> <li> still keep the selected text (results of the search) which says --Print this display too!--</li></ol>",
}
];
</script>
<ul>
<li><b>No Print</b>..Don't print anything After the search box and its results</li>
<li><b>No Print</b>..No graphics, Ads or anything else After the search box and its results</li>
</ul>
答案 0 :(得分:0)
通过打印媒体查询进行打印时,您可以从页面中排除/包含特定的HTML元素。
示例:
@media print {
/* All your print styles go here */
#header, #footer, #nav {
display: none !important;
}
ol {
display: block !important;
}
}
有关打印介质查询的详细信息,请参阅此article。
因此,如果您最初需要添加动态内容(ol
标记)到display: none
的页面,它将不会显示,但会打印,因为打印介质查询会覆盖它。 / p>