Question

我的代码有问题，但我无法弄清楚我做错了什么。我要做的是，当单击“打印”按钮时，在调用window.print（）之前，动态填充“print”div，其中包含从“screen”div中提取的内容。我曾经向我解释过这个

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

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

        <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的页面，它将不会显示，但会打印，因为打印介质查询会覆盖它。 / p>

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

1 个答案: