网页打印的简单实现 + window.print

网页打印的简单实现

最经在做一个web小项目的时候，需要从网页中打印出表格数据。
由于是第一次接触网页打印，所以从网络搜索了很久，鉴于项目要求的打印功能比较简单，最终放弃了诸多的开源项目，而是选择了利用HTML+CSS实现打印功能。

打印整个网页页面
这种打印没什么可说的，目前主流浏览器几乎都支持打印功能。一般在可打印页面中，在网页空白处点击鼠标右键，在显示的选项中会出现“打印”选项，点击“打印”选项就会打开打印界面。

* 打印页面中的部分内容*
我项目的打印功能采用的是CSS中的media标签的print属性来实现的。
关于media标签的其它属性介绍可从网络获取，大致去了解一下，这里就不多言了。
@media print的使用如下：

<style type="text/css" media="print">h1,button {color:#888}.title{font-size:14pt}
</style>

在使用上和一般的CSS样式没有什么大的区别，只不过多设置了一项media。
设置了print属性的样式表中的样式，对网页的显示没有影响，其只是对页面的打印效果进行处理。
在打印样式中可以对打印效果的字体字号、背景色、内容显示等进行设置，与CSS相同。
在这些设置中，visibility属性和display属性是我最为需要的。
visibility:hidden 和 display:none 这两个属性设置都可以实现网页部分打印的功能。其中，前者仅仅是隐藏相应标签组件，但其显示区域依然被其占有，显示为大片空白；后者则使标签组件不可见和不可知，相当于从网页中将组件删去了。
以下为使用实例。
一个简单的测试网页代码：

<html>
<head>
<meta charset="UTF-8">
<title>Print Page</title>
<style type="text/css" media="print"><!-- 打印属性设置区域 -->
</style>
</head>
<body>
<H1>Hello Boy!</H1>
<h2>Hello Girl!</h2>
<H3>Hello Everyone!</H3>
<table><tr><th>name</th><th>age</th></tr><tr><td>张三</td><td>20</td></tr><tr><td>李四</td><td>33</td></tr>
</table>
</body>
</html>

将这种正常情况下的打印效果定为1；
将在原始代码基础上设置打印属性

h2,h3{visibility:hidden}

后的打印效果记为2；
将在原始代码基础上设置打印属性

h2,h3{display:none}

后的打印效果记为3。
以下分别文1、2、3效果的截图：
效果1：

效果2：

效果3：

从上可以很明显的看出二者的区别。

最后再介绍一下利用javascript函数进行打印，js的打印函数为window.print()，我们可以在网页中想要的地方添加这个打印的提示及处理。比如，在表格上面添加一个打印的超链接提示。

<a href="#" onclick="window.print()">打印</a>

好了，关于简单打印网页的介绍就差不多了。利用CSS标签进行打印的一个缺点就是一定会弹出打印的提示框，如果项目中不方便或者不能弹出打印提示框，那么可以使用相应的开源项目来实现打印功能。

项目时间匆忙，写得比较仓促，难免出现纰漏，如有发现，劳烦告知，谢谢。

网页打印的简单实现 + window.print相关推荐

打印屏蔽部分内容window.print()
var bdhtml=window.document.body.innerHTML;var sprnstr=""; //开始打印标识字 ...
网页打印非常优秀的插件 Print.js
前言:最近需要在网页上打印,网上找了很多,刚开始使用的 lodop打印插件来打印,没有达到理想的要求,它需要下载.区分浏览器的位数来安装.在vue使用时候必须写成内部样式,在笔记本样式失效等问题,使我 ...
php网页打印框架,简单打印【Release】 - HisiPHP基于ThinkPHP和Layui开发的通用后台管理框架...
专为WEB打印而生使用webSocket协议,脱离语言环境限制,主流浏览器即可支持! 精准打印毫米精度,轻松实现POS小票,发票套打等. 多种语言支持ASP, ASP.NET, PHP, JSP ...
网页打印javascript:window.print()
在做B/S项目开发时.难免会遇到网页打印问题! 可以用css控制, @media print .a {display:block} .b {display:hidden} 好像是这样.把你不想打印的部 ...
window.print() 前端实现网页打印详解
前言 print作为浏览已经比较成熟的技术可以经常被用来打印页面的部分内容,我们可以在MDN上查看到相关的简单介绍. 一.print()方法 print() 方法用于打印当前窗口的内容.调用 prin ...
WEB打印-网页打印功能(带分页、可多页打印)
<html> <head> <title>Web打印</title> <meta http-equiv="Content-Type&qu ...
网页打印按钮的源代码
网页打印按钮的源代码:javascript:window.print(); 可以用css控制 @media print .a {display:block} .b {display:hidden} 好 ...
Vue2.js：前端在浏览器中网页表格打印的实现方案：window.print、print-js、iframe
目录需求描述方案1:直接打印页面方案2:使用css媒体查询控制打印内容方案3:第三方插件print-js 方案4:将要打印的节点内容写入iframe 方案5:将要打印的html写入iframe ...
网页pdf打印——window.print()
浏览器内核是提供了打印功能的,只要在控制台调用window.print()方法就可以将网页打印成pdf文件到我们选择的路径,但是打印的内容和格式可能不是我们想要的.所以写这篇博客介绍一种通用的方法: ...

网页打印的简单实现 + window.print

网页打印的简单实现

网页打印的简单实现 + window.print相关推荐

最新文章

热门文章