javascript - 如何使用 MVC 和 Javascript 隐藏打印内容？

Question

我认为标题很明显。这是我得到一些信息的地方:

Provide Print functionality in ASP.NET MVC 4

How do I hide an element when printing a web page?

首先，CSS:

@media print
{
    .no-print, .no-print *
    {
        display: none !important;
    }
}

所以，在我的 cshtml 中:

<td style="max-width: 100px;"><a href="javascript:window.print()" class="btn btn-default">Print</a>

现在我不想打印的东西:

<div style="top:120px;left:10px;position:absolute;" class="no-print"></div>

我也尝试过class="noPrint"

一切都很好，除了在打印前的预览中我仍然看到我的菜单...所以我想它会被打印...我使用 chrome。

有什么想法吗？

Answer 1

根据您提供的信息，我看不出打印媒体查询无法执行并阻止打印菜单的任何原因。看看fiddle公开此标记:

<td style="max-width: 100px;">
  <a href="javascript:window.print()" class="btn btn-default">Print</a>
</td>

<div style="top:120px;left:10px;position:absolute;" class="no-print">
  Won't print this!
  <span>Or this!</span>
</div>

它显示您提供的基本元素，并且打印似乎可以正确隐藏这些元素。

您能提供更多细节吗？也许正在发生其他事情，导致这些元素暴露，或者 CSS 尚未保存 - 类似的事情。