Question

如何查看从网站生成的发票的打印预览。如果我用脚本打印

<a href="javascript:window.print()">print this page</a>

在打印“打印此页”中也打印出来。我怎么能隐藏它？

Answer 1

解决问题的以下部分：

在印刷品中“也打印此页面   印刷。

我该如何隐藏它？

创建一个新样式表（在本例中，我将其命名为“print.css”）并将其包含在HTML中，如下所示：

<link rel="stylesheet" href="print.css" type="text/css" media="print" />

请注意media="print" - 这意味着样式表仅在打印页面时使用。

接下来为您的<a>元素分配一个类，以便我们可以在CSS中引用它：

<a href="javascript:window.print()" class="noPrint">Print this Page</a>

最后，在您的CSS文件中，包含以下规则：

.noPrint {
    display: none;
}

现在，“打印此页”链接不应出现在页面的打印版本中。

史蒂夫

Answer 2

您可以创建单独的print stylesheets，以便对网站在打印中的外观进行一些控制。在打印之前，您可以使用此特殊打印样式表向用户显示该站点。但是，这并没有给你100％的预览，因为每个浏览器处理的东西都有所不同。在实际打印之前，你不会看到它是如何打印的。使用打印样式表会让你非常接近。

某些操作系统和打印机驱动程序在点击“打印”按钮和实际打印之间为用户提供预览，但这不是您可以控制的，或者保证始终可用。

Answer 3

浏览器不提供API来触发浏览器中的打印预览功能。

令人高兴的是，他们几乎都将它保存在通常的位置（悬挂在“文件”菜单中），因此您不必引起用户的注意。

Answer 4

您可以通过调用window.print（）来获取要打印的当前页面。例如：

   <a href="JavaScript:window.print();">Print this page</a>

如果您想让他们知道打印的样子，您可以使用this page上的脚本为他们提供打印页面的预览方式。

Answer 5

令人惊讶的是，还没有人解决过

如何查看从网站
生成的发票的打印预览

问题。我只需要一个类似的功能，并在How to see the print media CSS in Firebug?

中提出解决方案

Answer 6

要直接回答您的问题，当您调用Browser print（）方法时，它会按原样打印页面。如果要打印不同版本的页面（例如，不使用“打印此页面”元素），则需要创建单独的可打印版本的页面（通常使用单独的样式表），而不是那些您在打印页面上不想要的元素。

Answer 7

要在打印时隐藏链接，请执行以下操作：

<style type="text/css" media="print">
.printlink
{
    display:none;
}
</style>
<a href="javascript:windows.print()" class="printlink">print this page</a>

可替换地：

<a href="javascript:windows.print()"
onclick="this.style.display='none';"
class="printlink">
print this page
</a>

虽然取消打印后不会再出现这种情况。

Answer 8

您应该使用

隐藏您不希望在打印中显示的元素

display:none

我写了一篇关于printing your webpage的教程。我希望它有所帮助。

Answer 9

这就是我使用的：

printPage(evt: any) {
    // add this 'noprint' class to elements you want to hide from printing
    let hideElements = document.getElementsByClassName('noprint');  
    let arr = Array.prototype.slice.call(hideElements)
    arr.map(val => {
      val.style.visibility = 'hidden';
    })
    let w = window.open();
    // 'main' is the section I want to print
    w.document.write(document.getElementById('main').innerHTML);  
    w.print();
    w.close();
    arr.map(val => {
      val.style.visibility = 'visible';
    })
}

Answer 10

function printReport( )
{     
    document.getElementById('ImagePrint').style.visibility='hidden';     
    window.print();
    document.getElementById('ImagePrint').style.visibility='visible';        
}

在html正文中

<div>
    <a id="ImagePrint" onclick="return printReport();" style="vertical-align: top">print Info</a>
</div>

此功能不会在打印时显示您的图像。你可以使用你的控件而不是带有控件ID的图像。希望你能得到你的解决方案

JavaScript打印预览

10 个答案: