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-目录

    1.学习 HTML5-页面结构 2.HTML5标记 3.HTML5机构化语义元素 4.HTML5表单 5.HTML5媒体元素:Audio和Video 6.HTML5绘图API 7.HTML5 Canv ...

  2. 关于tableview内cell自定义的注册以及创建

    自定义cell的方法主要有两种,storyboard以及xib(假设新建的是cellTableViewCell类) 比较倾向于xib方式使用xib在xib文件内将自定义的cell绘制好后导入到调用文件 ...

  3. WordCount的程序设计没写出来怎么办

    这一星期要完成三个小作业,完成前两个已经让我很吃力的了,现在这个WordCount的编程我都没有头绪,不知道从何下手.虽然要求很看起来很简单,可是不知道怎么去设计这个程序,这两天我也在积极找书学习相关 ...

  4. java多线程与单例模式(Singleton)不得不说的故事

    转发自:http://blog.csdn.net/ligang7560/article/details/50890282 单例模式的多种实现方式 我们都知道单例模式有几种常用的写法: - 饿汉模式 - ...

  5. JavaScript Patterns 4.8 Function Properties - A Memoization Pattern

    Gets a length property containing the number of arguments the function expects: function func(a, b, ...

  6. 驳 GarbageMan 的《一个超复杂的简介递归》——对延迟计算的实验和思考

    这是一篇因骂战而起的博文,GarbageMan 在该文章回复中不仅对我进行了侮辱,还涉及了我的母校,特写此文用理性的分析和实验予以回击. 在此也劝告 GarbageMan,没什么本事就别在那叫嚣了,还 ...

  7. 正确的选择log级别

    开发一个应用,日志的重要性不言而喻.然而有时会发现日志中会出现大量的垃圾日志.所谓垃圾日志,就是不需要知道的日志,或者这些日志对于应用查看.跟踪没有什么作用.也正是(但不仅仅是)出于这些问题的考量,常 ...

  8. 十五天精通WCF——第十三天 用WCF来玩Rest

    在我们玩wcf的时候,都会潜意识的觉得wcf就是通过soap协议交换消息的,并且可以在basic,tcp,msmq等等绑定中任意切换, 牛逼的一塌糊涂,但是呢,如果说哪一天wcf不再使用soap协议, ...

  9. SQL Server：字符串函数

    以下所有例子均Studnet表为例: 1. len():计算字符串长度 len()用来计算字符串的长度,每个中文汉字或英文字母都为一个长度 select sname, len(sname) from ...

  10. W3School-CSS 文本实例

    CSS 文本实例 CSS 实例 CSS 背景实例 CSS 文本实例 CSS 字体(font)实例 CSS 边框(border)实例 CSS 外边距 (margin) 实例 CSS 内边距 (paddi ...