使用javascript打印文档

Question

嗨，我需要不带按钮地打印文档。任何人都可以引导我完成此任务。

我有一个按钮可以在按钮单击onclick（）事件中打印，我已经使用window.print（）来打印这些数据。但是在打印预览中，它显示了包含这四个按钮的页面。我不想要那些按钮，我只需要那些数据。

有关更多信息，我在下面添加了图像 我的打印预览os ubuntu

Answer 1

使用CSS @media print或print样式表可在print按钮时隐藏该按钮。 这样，无论是否使用该按钮，都将在打印输出上将其隐藏。

<style type="text/css">
@media print {
    #printbtn {
        display :  none;
    }
}
</style>
<input id ="printbtn" type="button" value="Print this page" onclick="window.print();" >

请参阅@media打印

附加参考

Answer 2

您可以为打印指定不同的CSS规则。 您可以像这样使用@media print {}范围：

@media print {
    /* Add your custom css rules here */
   input {
       display: none;
   }
}

或者，您可以指定一个完全不同的css文件来像这样使用（如果您想将黑色背景和白色文本更改为对打印机更友好的内容）：

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

Answer 3

1给您的打印按钮一个ID：

<input id="printpagebutton" type="button" value="Print this page" onclick="printpage()"/>`

在调用window.print（）之前，以隐藏按钮的方式调整脚本：

 <script type="text/javascript"> function printpage() { //Get the print button and put it into a variable var printButton = document.getElementById("printpagebutton"); //Set the print button visibility to 'hidden' printButton.style.visibility = 'hidden'; //Print the page content window.print() //Set the print button to 'visible' again //[Delete this line if you want it to stay hidden after printing] printButton.style.visibility = 'visible'; } </script>

Answer 4

在不可打印的东西（例如按钮）中添加包装器。 检查以下代码：

 <head> <style type="text/css"> #printable { display: none; } @media print { #non-printable { display: none; } #printable { display: block; } } </style> </head> <body> <div id="non-printable"> Your normal page contents </div> <div id="printable"> Printer version </div> </body>

希望能帮助到你。

Answer 5

要使用javascript简单地打印文档，请使用以下代码，

print(){

        let w=window.open("www.url.com/pdf"); 
        w.print(); 
        w.close();
    }

使用javascript打印文档

问题描述

5 个解决方案

解决方案1
2 2015-02-18 09:53:02

解决方案2
2 2015-02-18 09:53:25

解决方案3
1 2015-02-18 09:52:09

解决方案4
1 2015-02-18 09:52:10

解决方案5
1 2018-10-23 13:11:33

使用javascript打印文档

问题描述

5 个解决方案

解决方案1 2 2015-02-18 09:53:02

解决方案2 2 2015-02-18 09:53:25

解决方案3 1 2015-02-18 09:52:09

解决方案4 1 2015-02-18 09:52:10

解决方案5 1 2018-10-23 13:11:33

解决方案1
2 2015-02-18 09:53:02

解决方案2
2 2015-02-18 09:53:25

解决方案3
1 2015-02-18 09:52:09

解决方案4
1 2015-02-18 09:52:10

解决方案5
1 2018-10-23 13:11:33