如何添加打印按钮或链接到您的网页

CSS (cascading style sheets) give you considerable control over how content on your web pages is displayed on the screen. This control extends to other media as well, such as when the web page is printed.

CSS(层叠样式表)使您可以控制屏幕上如何显示网页上的内容。 此控件也扩展到其他媒体，例如在打印网页时。

You may be wondering why you would want to add a print feature to your web page; after all, most people already know or can easily figure out how to print a web page using their browser's menus.

您可能想知道为什么要在网页上添加打印功能 ？ 毕竟，大多数人已经知道或可以轻松地知道如何使用浏览器的菜单打印网页。

But there are situations where adding a print button or link to a page will not only make the process easier for your users when they need to print out a page but, perhaps even more importantly, give you more control over how those printouts will appear on paper.

但是在某些情况下，在页面上添加打印按钮或链接不仅会使用户在需要打印页面时更加轻松，而且，更重要的是，您可以更好地控制这些打印结果在页面上的显示方式。纸。

Here's how to add either print buttons or print links on your pages, and how to define which pieces of your page content will be printed and which will not.

这是在页面上添加打印按钮或打印链接的方法，以及定义将打印哪些页面内容以及不打印哪些页面内容的方法。

添加打印按钮 ( Adding a Print Button )

You can easily add a print button to your web page by adding the following code to your HTML document where you want the button to appear:

通过将以下代码添加到HTML文档中您希望按钮出现的位置，您可以轻松地将打印按钮添加到您的网页：

onclick="window.print();return false;

The button will be labeled as Print this page when it appears on the web page. You can customize this text to whatever you like by changing the text between the quotation marks following

该按钮出现在网页上时，将被标记为“ 打印此页”。 您可以通过在以下引号之间更改文本来将其自定义为所需的文本

value= in the code above.

Note that there is a single blank space preceding the text and following it; this improves the appearance of the button by inserting some space between the ends of the text and the edges o
请注意，在文本之前和之后都有一个空格。 通过在文本的两端和边缘之间插入一些空格，可以改善按钮的外观

添加打印链接 ( Adding a Print Link )

It's even easier to add a simple print link to your web page. Just insert the following code into your HTML document where you want the link to appear:

将简单的打印链接添加到您的网页甚至更加容易。 只需将以下代码插入要显示链接HTML文档中：

   
   

    
    

You can customize the link text by changing "print" to whatever you choose.


    
     
    
    
  Making Specific Sections Printable  

    
    

You can set up the ability for users to print specific parts of your web page using a print button or link. You can do this by adding a print.css file to your site, calling it in the head of your HTML document and then defining those sections you want to make easily printable by defining a class. 


    
    

First, add the following code to the head section of your HTML document:


    
    

Next, create a file named print.css. In this file, add the following code:


    
    
body {visibility:hidden;}
.print {visibility:v


    
    

This code defines all elements in the body as hidden when being printed unless the element has the "print" class assigned to it.


    
    

Now, all you need to do is to assign the "print" class to the elements of your web page that you want to be printable. For example, to make a section defined in a div element printable, you would use


    
    

Anything else on the page that is not assigned to this class will not print.


   
   

翻译自: https://www.thoughtco.com/how-to-add-a-print-button-4072006