JavaScript 打印预览答案

【问题标题】：JavaScript print previewJavaScript 打印预览
【发布时间】：2009-07-07 06:33:01
【问题描述】：

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

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

在打印中“打印此页”也打印了。怎么隐藏？

【问题讨论】：

标签： javascript html css printing

【解决方案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;
}

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

史蒂夫

【讨论】：

或者添加一个有意义的类名'no-print'，并拥有no-print {display: none;}，并将其应用于所有在打印版本中不相关或不需要的项目。

【解决方案2】：

您可以创建单独的print stylesheets 以对网站在打印时的外观进行一般控制。您可以在打印之前使用这个特殊的打印样式表向您的用户显示站点。但是，这并不能为您提供 100% 的预览，因为每个浏览器处理事情的方式都略有不同。在实际打印之前，您不会看到它是如何打印的。不过，使用打印样式表会让您非常接近。

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

【讨论】：

【解决方案3】：

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

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

【讨论】：

难道没有办法构建与浏览器提供的完全相同的打印预览吗？
不！不！不！不！不！不！不！不！不！不！不！（Stackoverflow 有最小评论长度）
让浏览器处理打印预览。包括一个打印样式表，使您的发票页面在打印时看起来很漂亮（这对于任何网页都是一件好事），如果需要，包括一个“打印此页面”链接，但让浏览器处理基于浏览器的任务。

【解决方案4】：

您可以通过调用window.print() 来打印当前页面。例如：

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

如果您想让他们了解打印的效果，您可以使用this page 上的脚本为他们提供打印页面方式的伪预览。

【讨论】：

这是用于打印的。但我需要在打印前预览
还有一件事，当我用这个脚本打印然后打印这个页面时也会打印。我该如何隐藏这个？
实际上，伪预览是您可以在浏览器中获得的最接近的预览。在这种情况下，伪预览意味着所有以“屏幕”为目标的样式表都被删除，并且所有以“打印”为目标的样式表都被应用。没有分页，抱歉。

【解决方案5】：

令人惊讶的是，还没有人解决这个问题

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

问题。我只是需要一个类似的功能，并在How to see the print media CSS in Firebug? 中提出了解决方案

【讨论】：

【解决方案6】：

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

【讨论】：

嗯？不，你没有。您只需使用覆盖打印样式，在 CSS 中使用 @media 查询或在页面的 HTML 中使用 media="print"。然后使用no-print 类标记Print this page 链接并使用display:none; 设置.no-print 的样式，并应用您想要的任何其他特定于打印的样式。

【解决方案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>

虽然这在取消打印后不会再次出现。

【讨论】：

【解决方案8】：

您应该隐藏不想在打印中显示的元素

display:none

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

【讨论】：

未能表明您正在链接到自己的网页。
链接到自己的网页失败。

【解决方案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';
    })
}

【讨论】：

【解决方案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 的图像。希望你能得到你的解决方案

【讨论】：