尝试打印搜索“标签”和“描述”而不在页面内打印任何其他内容

Question

我的代码有问题，但我不知道我做错了什么。 我想要完成的是，当单击“打印”按钮时，在调用 window.print() 之前，使用从“屏幕”div 绘制的内容动态填充“打印”div 我是这样向我解释的

在你的 body 标签中有两个主要的子 div。样式显示在@media 屏幕下并隐藏在@media 打印下。样式显示在@media print 下并隐藏在@media screen 下

这是我尝试的小提琴。任何帮助表示赞赏。

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="&#x1f50d; Search Box Type here, Then Click Print!" name="tryit" data-using="tryit">
                <p class="content">&nbsp;</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>

Answer 1

通过打印媒体查询打印时，您可以从页面中排除/包含特定的 HTML 元素。

例子：

@media print { 
   /* All your print styles go here */
   #header, #footer, #nav {
     display: none !important;
   } 

   ol {
     display: block !important;
   }
}

有关印刷媒体查询的更多信息，您可以阅读此article。

因此，如果您将最初需要的动态内容（ol 标记）添加到带有display: none 的页面，它将不会显示但会被打印，因为打印媒体查询将覆盖它。