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

网页打印的简单实现

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

打印整个网页页面
这种打印没什么可说的,目前主流浏览器几乎都支持打印功能。一般在可打印页面中,在网页空白处点击鼠标右键,在显示的选项中会出现“打印”选项,点击“打印”选项就会打开打印界面。
网页打印的简单实现 + window.print_第1张图片

* 打印页面中的部分内容*
我项目的打印功能采用的是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 Pagetitle>
<style type="text/css" media="print">
    -- 打印属性设置区域 -->
style>
head>
<body>
<H1>Hello Boy!H1>
<h2>Hello Girl!h2>
<H3>Hello Everyone!H3>
<table>
    <tr>
        <th>nameth>
        <th>ageth>
    tr>
    <tr>
        <td>张三td>
        <td>20td>
    tr>
    <tr>
        <td>李四td>
        <td>33td>
    tr>
table>
body>
html>

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

h2,h3{visibility:hidden} 

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

h2,h3{display:none} 

后的打印效果记为3。
以下分别文1、2、3效果的截图:
效果1:
网页打印的简单实现 + window.print_第2张图片

效果2:
网页打印的简单实现 + window.print_第3张图片

效果3:
网页打印的简单实现 + window.print_第4张图片

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

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

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

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

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

你可能感兴趣的:(网页)