如何向网页添加打印按钮或链接(add a print button or link to your web page)

CSS(层叠样式表)为您提供了相当大的控制权,可以控制网页内容在屏幕上的显示方式。此控件也扩展到其他媒体,例如打印网页时。...

CSS(层叠样式表)为您提供了相当大的控制权,可以控制网页内容在屏幕上的显示方式。此控件也扩展到其他媒体,例如打印网页时。

Printer icon on white round vector button Printer icon on white round vector button

您可能想知道为什么要在网页中添加打印功能;毕竟,大多数人已经知道或者可以很容易地知道如何使用浏览器的菜单打印网页。

但在某些情况下,在页面上添加打印按钮或链接不仅可以让用户在需要打印页面时更轻松地完成打印过程,而且,也许更重要的是,还可以让您更好地控制打印输出在纸张上的显示方式。

下面介绍如何在页面上添加打印按钮或打印链接,以及如何定义哪些页面内容将被打印,哪些不被打印。

添加打印按钮

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

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

当按钮出现在网页上时,它将被标记为“打印此页面”。您可以通过更改以下引号之间的文本,将此文本自定义为您喜欢的任何文本

value=in the code above.

添加打印链接

在网页上添加一个简单的打印链接更容易。只需将以下代码插入希望显示链接的HTML文档中:

print

您可以通过将“打印”更改为您选择的任何内容来自定义链接文本。

使特定部分可打印

您可以设置用户使用打印按钮或链接打印网页特定部分的功能。您可以通过将print.css文件添加到站点,在HTML文档的头部调用它,然后通过定义类来定义那些您希望使其易于打印的部分来实现这一点。

首先,将以下代码添加到HTML文档的标题部分:

type="text/css" media="print" />

接下来,创建一个名为print.css的文件。在此文件中,添加以下代码:

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

此代码将正文中的所有元素定义为在打印时隐藏,除非该元素具有指定给它的“打印”类。

现在,您所需要做的就是将“print”类分配给希望可打印的网页元素。例如,要使div元素中定义的节可打印,可以使用

页面上未分配给此类的任何其他内容都不会打印。

  • 发表于 2021-10-21 01:20
  • 阅读 ( 378 )
  • 分类:编程

你可能感兴趣的文章

如何使用esp8266制作自己的wi-fi连接按钮

... 如果你想知道我是如何让我的LED去接地引脚只使用这些微小的电缆位,我们的快速实验板速成课程应该有助于清理它!检查设置并通过USB将NodeMCU连接到计算机。 ...

  • 发布于 2021-03-23 22:23
  • 阅读 ( 398 )

Windows10上的“立即见面”是什么?您如何使用它?

...快速视频聊天,而无需Skype帐户或Skype应用程序。下面是如何使用它。 什么是现在见面(meet now)? 微软的“Meet Now”是Skype于2020年4月推出的一项功能,旨在将让Zoom在Skype平台上大受欢迎的易用性功能带到Skype平台上。你几乎可以...

  • 发布于 2021-04-01 00:25
  • 阅读 ( 226 )

如何在“神奇宝贝剑与盾”中添加好友

...与朋友在神奇宝贝剑和盾牌任天堂开关。我们将向您展示如何添加朋友、发起交易、相互争斗等等! 在神奇宝贝宝剑和盾牌中寻找朋友 神奇宝贝之剑和盾牌的朋友系统使用任天堂交换机的本地朋友名单。朋友将自动出现在游...

  • 发布于 2021-04-01 08:12
  • 阅读 ( 273 )

“打印屏幕”按钮是否确实打印过屏幕(是否可以再次打印)?

...计算机发展历史遗留下来的点点滴滴。今天我们来看看“打印屏幕”按钮,回答一个读者迫切的问题:它真的打印过屏幕吗?如果是,它还能再打印一次吗? Dear How-To Geek, I’m far from a ******** nerd or computer historian so I hope my question...

  • 发布于 2021-04-09 01:21
  • 阅读 ( 160 )

如何把树莓皮变成谷歌云打印服务器

...能源啜饮树莓皮的任务。 我为什么要这么做? 相关:如何在Windows中实现原生Google云打印和打印机共享Currently there are two paths to Google Cloud Print access in your home: you can buy a Cloud Print enabled printer that links itself directly to your Google accoun...

  • 发布于 2021-04-11 17:27
  • 阅读 ( 234 )

最好的免费程序和在线服务发送和共享大文件

...Kicksend上为自己和爱人订购漂亮、高质量的印花。你选择打印,他们选择商店(简历,目标,或沃尔格林)。从你的**到他们的手在一个小时内。记忆准备好被框起来,永远珍藏。 Kicksend可帮助您释放电子邮件收件箱和其他人的...

  • 发布于 2021-04-12 03:10
  • 阅读 ( 378 )

如何拥有自己的网站(即使你不能建立一个)第3部分

...dPress软件。今天我们将解释WordPress不太明显的优点,以及如何从新的web软件中获得更多的好处。 这是我们系列文章的第三篇也是最后一篇,介绍如何拥有自己的网站,并通过基本的WordPress安装创建内容。在任何初学者都能理解...

  • 发布于 2021-04-12 12:27
  • 阅读 ( 211 )

20个最佳Windows7开始菜单和任务栏提示和技巧

...可以在开始菜单上快速方便地访问它。下面的文章描述了如何利用Libraries特性将录制的TV库重命名为其他名称。 这不是一个完美的解决方案,但如果你经常使用Dropbox,它是值得的。 将“我的Dropbox”添加到Windows7的“开始”菜单 ...

  • 发布于 2021-04-12 18:13
  • 阅读 ( 298 )

如何使用免费软件创建高质量的照片打印

...套件中分辨出来。请继续关注各种图形程序的链接,以及如何为您的照片获得完美的打印设置的简单方法。 下载免费软件 有许多程序可以打印照片,有些质量参差不齐。打印实际上是一件相当基本的事情,因为您的操作系统...

  • 发布于 2021-04-13 03:20
  • 阅读 ( 188 )

如何将实时网页添加到powerpoint演示文稿

...有没有想过在PowerPoint演示中演示一个实时网站?下面是如何将一个实时网页**到PowerPoint演示文稿中,以便显示您正在谈论的确切内容。 不管你在做什么样的演讲,有时从网上向听众展示信息是很有用的。你可以为你演示的网页...

  • 发布于 2021-04-13 08:23
  • 阅读 ( 206 )
0Hg4v20V8
0Hg4v20V8

0 篇文章

相关推荐