1. 在firefox下，每页均会打印重复thead（表头），tfoot（表尾）的内容；IE8下无效(其它IE版本未测试)

2. 分页的处理

@media print {
     .page-break { page-break-after: always; }
   }

在需要分页的tr上，加上该样式即可

3.隐藏某些不需要打印的区域

@media print {
    .no-print { display: none; }
     }

4.页面顶部网址之类的，如何去掉？

IE:  File -> Page Setup

FireFox:  Print -> Page Setup

5.打印页面指定区域

<iframe id="frmPrint" width="0" height="0" frameborder="0"></iframe>

<div id="divContent">这是打印的内容</div>

<div>这里不需要打印</div>

<button onclick="printTest()">打印</button>

<script type="text/javascript">

	function printTest(){

		var ifrm = document.getElementById("frmPrint");

		//下行中的style只是为了演示如何附加样式

		ifrm.contentWindow.document.body.innerHTML = "<style>*{color:red}</style>" + document.getElementById("divContent").innerHTML;

		ifrm.contentWindow.print();

	}

</script>

上述代码仅适用于FireFox，IE下建议用css隐藏不需打印的内容

完整示例代码：

<!doctype html>

<html>

	<head>

		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

		<title>html打印测试</title>

		<style type="text/css" media="all">

			* { margin:0; padding:0; font-size:12px }

			table { margin:10px; border:2px solid #000; border-collapse:collapse; margin:5px auto }

			th, td { border:1px solid #000; border-collapse:collapse; padding:3px 5px }

			h1 { font-size:24px }

			 @media print {

				.no-print { display: none; }

				.page-break { page-break-after: always; }

			}

		</style>

	</head>

	<body>

		<div class="no-print" style="text-align:center;margin:5px">

			<button onClick="window.print()"> 打 印 </button>

		</div>

		<table >

			<thead>

				<tr>

					<th colspan="5">

						<h1>XXXX报表</h1>

					</th>

				</tr>

				<tr>

					<th> 序号 </th>

					<th> 栏目1 </th>

					<th> 栏目2 </th>

					<th> 栏目3 </th>

					<th> 栏目4 </th>

				</tr>

			</thead>

			<tbody>

				<tr>

					<td> 1 </td>

					<td> 数据1 </td>

					<td> 数据2 </td>

					<td> 数据3 </td>

					<td> 数据4 </td>

				</tr>

				<tr class="page-break">

					<td> 2 </td>

					<td> 数据1 </td>

					<td> 数据2 </td>

					<td> 数据3 </td>

					<td> 数据4 </td>

				</tr>

				<tr>

					<td> 3 </td>

					<td> 数据1 </td>

					<td> 数据2 </td>

					<td> 数据3 </td>

					<td> 数据4 </td>

				</tr>

				<tr>

					<td> 4 </td>

					<td> 数据1 </td>

					<td> 数据2 </td>

					<td> 数据3 </td>

					<td> 数据4 </td>

				</tr>

				<tr>

					<td> 5 </td>

					<td> 数据1 </td>

					<td> 数据2 </td>

					<td> 数据3 </td>

					<td> 数据4 </td>

				</tr>

			</tbody>

			<tfoot>

				<tr>

					<th> 合计： </th>

					<th> </th>

					<th> </th>

					<th> 300.00 </th>

					<th> 300.00 </th>

				</tr>

			</tfoot>

		</table>

	</body>

</html>

纯html的table打印注意事项的更多相关文章

  1. C#巧用Excel模版变成把Table打印出来

    将一个做好的Excel模版,通过程序填上数据然后打印出来这个需求有两种方法一种是通过代码打开Excel模版然后填入数据然后再打印. 第二种方法就是我将要介绍的 1.将Excel设置好格式另存为HTML ...

  2. LODOP中的纯文本和超文本打印项

    LODOP中的的打印项,有超文本也有纯文本,超文本指的是用html语言,html里的标签为值的打印项,该种打印项会经过浏览器解析,LODOP本身不带解析超文本的引擎,调用的windows底层引擎,与i ...

  3. Blender 精确建模3D打印注意事项

    首先参照前面的<Blender的单位:一图弄懂Blender的单位>设置好自己环境的长度单位. 下面的注意事项,没有先后关系,遇到的就会补充. 1. 模型需要进行布尔计算前,在物件我是下, ...

  4. JavaScript--动态添加元素（纯js书写table并删除数据）

    本文是对上一篇博文的扩展,用js书写表格,并添加和删除数据,详细代码解释见代码页. 对于文中使用的script脚本函数,下载地址如下:https://pan.baidu.com/s/13OFnj7nc ...

  5. 纯JS 将table表格导出到excel

    html <div > <button type="button" onclick="getXlsFromTbl('tableExcel','myDiv ...

  6. Silverlight打印注意事项

    1.Silverlight的打印功能从版本5开始才支持矢量打印,这不但要求打印机支持矢量打印,而且还要安装相应的打印驱动程序. 测试你的打印机是否支持矢量打印,可以参考:如何用C#代码检测打印机和驱动 ...

  7. 构建轻量级的Table View注意事项[UIKit]

    參考文章来自objcio站点 一.使用ChildViewController 将Table ViewController作为Child View Controller加入到其它View Control ...

  8. 纯CSS实现table表头固定（自创备忘）

    因为之前约定时候产品没说要表头固定,这次迭代测试突然提出这个需求,而且不知道因为什么未知原因非要这样不可--因为之前用了table标签做表单,而且也没用插件,这下就难了点,找另外一个前端前辈妹子商量了 ...

  9. 纯css实现table表格固定列和表头,中间横向滚动的思路-附案例

    最近做的后台管理系统要处理大量的表格 原项目是采用的for循环加拼接字符串的方式实现;导致js代码一大堆;各种单引号和双引号的嵌套;让人头疼;遂引入vue.js;用v-for做模板渲染;工作量顿时减轻 ...

随机推荐

  1. HTML5 respond.js 解决IE6~8的响应式布局问题

    HTML5 respond.js 解决IE6~8的响应式布局问题   响 应式布局,理想状态是,对PC/移动各种终端进行响应.媒体查询的支持程度是IE9+以及其他现代的浏览器,但是IE8在市场当中仍然 ...

  2. [PL/SQL]使用PL/SQL实现ORACLE的Excel格式导入导出

    注:教程所使用的PL/SQL Developer版本为10版本 1.oracle导出excel格式 第一步,在pl/sql窗口查询出你想要导出的数据. 第二步,选择你想导出的数据,然后右键" ...

  3. asp.net之treeview无法显示树结点图标（IP与域名的表现竟不一样）

    背景   今天接到客户的电话,说部署上去的项目树型的treeview无法正常显示,显示成了好几个大红叉.如: 排查   于是我通过远程登录到服务器,在本地测试了一会发现没有这个问题存在,无论是通过IP ...

  4. ORA-00030: User session ID does not exist.

    同事在Toad里面执行SQL语句时,突然无线网络中断了,让我检查一下具体情况,如下所示(有些信息,用xxx替换,因为是在处理那些历史归档数据,使用的一个特殊用户,所以可以用下面SQL找到对应的会话信息 ...

  5. coursera机器学习笔记-神经网络，初识篇

    #对coursera上Andrew Ng老师开的机器学习课程的笔记和心得: #注:此笔记是我自己认为本节课里比较重要.难理解或容易忘记的内容并做了些补充,并非是课堂详细笔记和要点: #标记为<补 ...

  6. 设计模式C#实现（十二）——装饰模式

    意图 0 适用性 1 结构 2 实现 3 效果 4 参考 5 意图 动态的给一个对象添加一些额外的职责. 适用性 动态的为单个对象添加职责而不影响其他对象 处理那些可以撤销的职责(? 在某些功能不需要 ...

  7. LNMP环境搭建

    LNMP环境搭建 Linux + Nginx + MySQL + PHP PHP是一种脚本语言,当前中国乃至世界上使用PHP语言开发的网站非常普遍 Nginx是一个web服务软件,和apache是一类 ...

  8. 失眠害死人-jQuery&AJAX

    hi 又是两天没有做事情,后悔什么的只能带来更多的后悔吧,好好做事,忘了两天前自己作出来的失眠 1.jQuery -----jQuery与AJAX-----(PS:ajax是什么请自行百度,或者看我之 ...

  9. 使用IntelliJ IDEA 编译开源的机器学习源码--Oryx

    What is Oryx? 大名鼎鼎的Sean Owen (http://www.linkedin.com/in/srowen) 正在 Cloudera 作为 Director of Data Sci ...

  10. 三星s4宣传片配色有惊喜

    三星s4宣传片配色有惊喜据了解,一周前,三星曾对外发布了新旗舰手机galaxy s4的宣传视频,不过那份视频里所含信息仅仅只有s4发布会的邀请函.而日前,三星官方发布了s4的第二弹宣传片则暗示该机在配 ...