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. winform ListView应用之分组、重绘图标、网格线 (c# .net winform)

    最近在winform应用中需要用到可分组的数据列表功能,DataGridView默认没有提供分组的功能,而OutlookGrid(http://www.codeproject.com/KB/grid/ ...

  2. Oracle BIEE启停脚本

    作为BI的开发人员,经常启停BI服务在所难免,启动的过程又比较长,命令需要不同目录切换,简直烦死人呢, 特意整理了linux中的启动脚本,将以下脚本存成biee.sh,后面的过程就相当简单了, 启动: ...

  3. Mongodb Manual阅读笔记：CH7 索引

    7索引 Mongodb Manual阅读笔记:CH2 Mongodb CRUD 操作Mongodb Manual阅读笔记:CH3 数据模型(Data Models)Mongodb Manual阅读笔记 ...

  4. js 浮点运算出现的精度丢失问题

    var myf='6.202555'; myf=Number(myf).toFixed(2);//使用方法 Number.prototype.toFixed = function(scale) { v ...

  5. 编写Java应用程序。首先，定义描述学生的类——Student，包括学号（int）、 姓名（String）、年龄（int）等属性；二个方法：Student(int stuNo,String name,int age) 用于对对象的初始化，outPut()用于输出学生信息。其次，再定义一个主类—— TestClass，在主类的main方法中创建多个Student类的对象，使用这些对象来测 试Stud

    package zuoye; public class student { int age; String name; int stuNO; void outPut() { System.out.pr ...

  6. head,tail

    测试文件headtail 1 L 2 L 3 L 4 L 5 L 6 L 7 L 8 L 9 L 10 L 11 L 12 L 13 L 14 L 15 L 16 L 17 L 18 L 19 L h ...

  7. df,du,mount

    df 查看当前系统中文件系统的使用情况 $df [-aTh]缺省选项查看当前系统的所有文件系统 -a列出所有的信息 -T列出文件系统类型 -hhuman-readable,用合适的单位表示大小 $df ...

  8. Python 变量类型

    Python 变量类型 变量存储在内存中的值.这就意味着在创建变量时会在内存中开辟一个空间. 基于变量的数据类型,解释器会分配指定内存,并决定什么数据可以被存储在内存中. 因此,变量可以指定不同的数据 ...

  9. 【简易版】IOS仿periscope自制狂赞飘桃心

    periscope自制狂赞飘桃心 国外的IOS app“periscope”非常的火,观看手机视频直播的时候,点击屏幕任何一个地方,屏幕右下角就能飘出各种颜色的桃心,效果非常的炫! 为此我自制了一个仿 ...

  10. CSS3 ::selection选择器

    一.介绍 之前看到有些网站选中内容的颜色和背景色都不是平时看到的蓝色和白色.今天有兴趣查看了一下,原来是一个很简单的CSS3的选择器::selection的用法. 上例子: <style> ...