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. [修复Win8.1 BUG] 解决Win8.1英文字体发虚不渲染问题

    Win8.1更新了宋体字体,中文字体显示漂亮了,但英文字体发虚不渲染,尤其是小号的英文和数字字体,看下图. 1.下载Win8的宋体2.打开字体文件点击安装3.导入注册表文件4.重启Win8.1 下载链 ...

  2. DOM属性操作

    HTML attribute  --> DOM property 每个html属性都对应一个DOM对象属性,举个栗子: <div> <label for="userN ...

  3. 使用CSS3滤镜让图片反转颜色

    CSS提供的滤镜也是一大亮点,我一直痴迷其中,有些滤镜的效果很有用,可是有些的滤镜效果可能只是为了玩玩儿,CSS常见的滤镜有这些:grayscale, blur, sepia,所有常见的过滤器.但是如 ...

  4. WPF学习之路（十三）URL

    URL一般由三个部分组成,协议.资源所在主机地址.资源路径 WPF中URL同样有三部分组成:pack.authority(application:| siteoforigin:).路径 资源文件 本地 ...

  5. aspx页面前端使用js 调用aspx.cs后台的方法,不回传

    本次使用 Ajax.dll,AjaxPro.dll 两个类库 1.首先添加引用:Ajax.dll,AjaxPro.dll 文件在 Libiary 目录下 2.配置 WebConfig 属性 将 下面2 ...

  6. 简述MVC框架模式以及在你（Android）项目中的应用

    标题是阿里电话面试的问题,一直以为自己很清楚MVC模式,结果被问到时,居然没法将MVC和Android中各个组件对应起来,所以,面试肯定挂了,不过面试也是学习的一种方式,可以知道大公司看中什么,以及自 ...

  7. 【故障处理】队列等待之enq IV - contention案例

    [故障处理]队列等待之enq IV -  contention案例 1.1  BLOG文档结构图 1.2  前言部分 1.2.1  导读和注意事项 各位技术爱好者,看完本文后,你可以掌握如下的技能,也 ...

  8. InnoDB源码分析--缓冲池（二）

    转载请附原文链接:http://www.cnblogs.com/wingsless/p/5578727.html 上一篇中我简单的分析了一下InnoDB缓冲池LRU算法的相关源码,其实说不上是分析,应 ...

  9. python简单爬虫定时推送同花顺直播及荐股至邮箱

    1.初衷:实践 2.技术:python requests Template 3.思路:根据直播页面获取评价最高的前十博主,定时爬行最新的消息和实战股票 4.思路:python 编辑简单邮件html模板 ...

  10. 思科ACI是一种什么样的技术?

    术语: SDN:Software Defined Network,软件定义网络 ACI:Application Centric Infrastracture,以应用为中心的基础网络架构 Fabric: ...