一、打印样式

  区别显示和打印的样式

  使用media="print"控制打印时的样式,如下:

打印时不显示打印按钮,设置页面宽度

    <style media="print">
.toolbox {
display: none;
} .container {
max-width: 210mm;
}
</style>
<style>
.container {
margin: 0 auto;
max-width: 960px;
}
<style>

  使用独立的样式文件

<link rel="stylesheet" type="text/css" media="screen" href="mycss.css">
<link rel="stylesheet" type="text/css" media="print" href="myprintcss.css">

  css里media的使用

  我们在网页里引用外部的css文件时,通常是用如下的代码:<link rel="stylesheet" type="text/css" href="mycss.css">

实际上,上面的link对象里,我们是省略了一个叫“media”的属性,这个属性指定样式表规则用于指定的设备类型。它有如下值可用:
all-- 用于所有设备类型 
aural-- 用于语音和音乐合成器 
braille-- 用于触觉反馈设备 
embossed-- 用于凸点字符(盲文)印刷设备 
handheld-- 用于小型或手提设备 
print-- 用于打印机 
projection-- 用于投影图像,如幻灯片 
screen-- 用于计算机显示器 
tty-- 用于使用固定间距字符格的设备。如电传打字机和终端 
tv-- 用于电视类设备

这么多的值,并不是每个都可用,因为浏览器厂商并没有全部实现它们。

二、分页打印

  打印需要分页时,但是自动分页又无法满足自己的需求时,需要手动分页

<style type="text/css">
  .pageBreak{ page-break-after:always;}
  .pageBreakBefore{ page-break-before:always;}
</style>

css里用于打印的属性

page-break-after : auto | always | avoid | left | right | null
参数:

auto : 假如需要在对象之后插入页分割符 
always :始终在对象之后插入页分割符 
avoid : 避免在对象后面插入页分割符 
left : 在对象后面插入页分割符直到它到达一个空白的左页边 
right :在对象后面插入页分割符直到它到达一个空白的右页边 
null : 空值。IE5用来取消页分割符设置

这个page-break-after,主要用来在打印时插入一个分页符,分页就靠它了。它还有个双胞胎的兄弟,叫page-break-before,参数和它一样,看名字即知道它是用来在对象之前插入分页符。

示例如下:

<!DOCTYPE html>

<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=UTF-8" />
<title>Paginated HTML</title>
<style type="text/css" media="print">
div.page
{
page-break-after: always;
page-break-inside: avoid;
}
</style>
</head>
<body>
<div class="page">
<h1>This is Page 1</h1>
</div>
<div class="page">
<h1>This is Page 2</h1>
</div>
<div class="page">
<h1>This is Page 3</h1>
</div>
</body>
</html>

打印模板

  关于.NET实现按模板分页的部分关键代码

样式

<link rel="stylesheet" href="@Url.Content("~/Content/normalize.css")">
<style media="print">
.toolbox {
display: none;
} .container {
max-width: 210mm;
}
</style>
<style>
.container {
margin: auto;
max-width: 960px;
}
.table-wrap {
width: %;
height: 903px;
}
table > * {
font-size: 14px !important;
} table {
border-collapse: collapse;
border: 1px solid black;
width: %;
} table tr th {
height: 20px;
} table tr td {
border: 1px solid black;
text-align: center;
} table tr td.left {
border: 1px solid black;
text-align: left;
padding-left: 5px;
} .page-foot {
margin-top: 10px;
text-align: center;
width: %;
} .pageBreakBefore {
page-break-before: always;
-webkit-break-inside: avoid;
page-break-inside: avoid;
} .subbox {
text-align: center;
} .footbox {
display: block;
} .namebox {
display: inline-block;
width: %;
margin-top: 10px;
} .hospitalName {
width: 200px;
text-align: center;
} .timeSpan {
width: 200px;
text-align: center;
} .text_line {
text-decoration: underline;
} .toolbox {
margin-top: 10px;
text-align: right;
} .wp10 {
width: %;
} .wp20 {
width: %;
} .wp50 {
width: %;
}
</style>

html

<div class="toolbox">
<span>提醒:在非ie打印预览时,通过预览界面的“更多设置”去掉页面上的页眉页脚。 &emsp; </span>
<button id="btnPrint">打印</button>
<button onclick="closeWin()">关闭页面</button>
</div>
        @for (int index = ; index < Model.List.Count;)
{
<h2 style="text-align: center;"> @string.Format("{0}服务周报", Model.CompanyName) </h2>
<p class="subbox">
<span class="hospitalName">甲方名称 <strong class="text_line">@Model.PartyACompanyName</strong> </span>
<span class="timeSpan">日期 <strong class="text_line">@Model.StartDate</strong> 至 <strong class="text_line">@Model.EndDate</strong></span>
</p>
<div class="table-wrap">
<table>
<tbody>
<tr>
<th class="wp10">序号</th>
<th class="wp40">标题</th>
<th class="wp20">姓名</th>
</tr>
@{
for (var j = ; j < ; j++)
{
if (index < Model.List.Count)
{
<tr>
<td class="wp10">@(index + )</td>
<td class="left wp40">@Model.List[index].Title</td>
<td class="wp20">@Model.List[index].UserName</td>
</tr>
index++;
}
}
}
</tbody>
</table>
</div>
<div class="footbox">
<div class="namebox"> <span class="hospitalName">甲方: ____________ </span>
<span class="timeSpan"> 日期: ____________ </span> </div>
<div class="namebox" style="text-align: right; width: 49%;"> <span class="hospitalName">乙方: ____________ </span>
<span class="timeSpan"> 日期: ____________ </span> </div>
<div class="page-foot">第@((index + ) / + (index % > ? : ))页</div>
</div>
<div class="pageBreakBefore"></div>
}

脚本

    <script src="~/Scripts/jquery-2.2.0.min.js"></script>
<script>
function pagesetup_null() {
var hkey_root, hkey_path, hkey_key;
hkey_root = "HKEY_CURRENT_USER";
hkey_path = "\\Software\\Microsoft\\Internet Explorer\\PageSetup\\";
try {
var RegWsh = new ActiveXObject("WScript.Shell");
hkey_key = "header";
RegWsh.RegWrite(hkey_root + hkey_path + hkey_key, "");
hkey_key = "footer";
RegWsh.RegWrite(hkey_root + hkey_path + hkey_key, "");
} catch (e) {
}
} $(function () {
$("#btnPrint").click(function () {
var explorer = window.navigator.userAgent;
if (explorer.indexOf("MSIE") >= ) {
pagesetup_null();
}
window.print();
});
}); function closeWin() {
window.open("", "_self").close();
}
</script>

参考与分享:

分享几款免费的web打印控件

WEB打印系列教程之二--使用WScript.Shell通过编程方式进行复杂的WEB打印设置

WEB打印系列教程之三--简单的WEB打印分页设置

每页都有的表头和打印分页

WEB打印-网页打印功能(带分页、可多页打印)

Google Chrome打印分页符

web打印中如何强制分页

web打印总结的更多相关文章

  1. ASP.NET MVC5+EF6+EasyUI 后台管理系统(55)-Web打印

    系列目录 前言 1.本次主要弥补工作流,用户表单数据的打印 2.使用JQprint做为web打印插件 3.兼容:FireFox,Chrome,IE. 4.没有依赖也没有配置,使用简单 代码下载:htt ...

  2. Web打印--Lodop API

    Lodop是一款专业的WEB打印控件,其设计目标是简单易用.功能足够强大,开创WEB打印开发的新局面. Lodop设计者对WEB下的打印开发任务进行了分类汇总,高度抽象,设计出仅用几个功能函数,就可实 ...

  3. Web打印控件

    Lodop是什么? 有人说她是Web打印控件,因为她能打印.在浏览器中以插件的形式出现,用简单一行语句就把整个网页打印出来: 有人说她是打印编程接口,因为她介于浏览器和打印设备之间,是个通道和桥梁,几 ...

  4. JS Web打印,实现预览新样式

    问题描述:     JS实现Web打印,要求打印前一种样式,打印预览时新样式 问题解决:         (1)设置打印时的css样式,设置打印前的css样式 注:         以上为print. ...

  5. Web打印控件smsx.cab使用说明

    在项目开发中,经常会用到页面打印的功能,在ASP.NET环境下推荐一款web打印控件smsx.cab.    使用方法:一般会先定义一个用于打印的母版页(Print.Master),在母版页上做好布局 ...

  6. 2013第39周一Web打印

    2013第39周一Web打印 项目中遇到了Java Web打印问题,简单调用IE浏览器的打印不能完全满足要求,于是就搜集了Web打印相关的主题,简单汇总一下.web打印难点在分页.页面纸张设置,页眉页 ...

  7. WEB打印插件Lodop

    Lodop.C-Lodop使用说明及样例   Lodop(标音:劳道谱,俗称:露肚皮)是专业WEB控件,用它既可裁剪输出页面内容,又可用程序代码直接实现 复杂打印.控件功能强大,却简单易用,所有调用如 ...

  8. WEB打印插件jatoolsPrinter

    为什么选择 jatoolsPrinter 免费版? 支持无预览直接打印 真正免费,不加水印,没有ip或域名限制,不限时间,兼容ie6+ 无须注册,下载即用 提供经过微软数字签名的cab自动安装包,安装 ...

  9. 网页WEB打印控件

    网页WEB打印控件制作 在WEB系统中,打印的确是比较烦人的问题,如果我们能制作一个属于自己的自定义的打印插件,那么我们在后续自定义打印的时候能随心所欲的控制打印,这样的效果对于程序员来说是非常开心的 ...

  10. WEB打印的几种方案

    -------------------------------------------一  基于Web的打印方案比较分析-------------------------------- 基于web的套 ...

随机推荐

  1. 再学习之Spring(面向切面编程)

    一.概念 1.理论 把横切关注点和业务逻辑相分离是面向切面编程所要解决的问题.如果要重用通用功能的话,最常见的面向对象技术是继承(inheritance)或 组成(delegation).但是,如果在 ...

  2. ORACLE SQL 整理

    1.查询字段中含有小写字母的数据 SELECT MATERIALCODE FROM RFXITEMATTENDCODE WHERE REGEXP_LIKE(MATERIALCODE,'([a-z])' ...

  3. WPF水珠效果按钮组

    效果图 相关知识 这部分基本就是废话,网上都能找到,我只不过是整理了以下.建议先不看,用到的时候可以回来看看 贝塞尔曲线 先来看两组图,有助于理解什么是贝塞尔曲线(图片取自维基百科,参考链接1) 二次 ...

  4. 》》webpack打包成的文件

    /******/(function(modules) { // webpackBootstrap /******/ // The module cache /******/ var installed ...

  5. java.lang.RuntimeException: Canvas: trying to use a recycled bitmap android.graphics.Bitmap@412d7230

    近期遇到了如标题这种错误,再次记录解决方法.本文參考帖子: http://bbs.csdn.net/topics/390196217 出现此bug的原因是在内存回收上.里面用Bitamp的代码为: t ...

  6. ArtDialog V6的简单使用

    artDialog v6 -- 经典的网页对话框组件,内外皆用心雕琢. 兼容性 測试通过:IE6~IE11.Chrome.Firefox.Safari.Opera 授权协议 免费,且开源.基于LGPL ...

  7. 使用&lt;jsp:include&gt;,不想写死URL,动态生成URL的解决的方法

    JSP中文件包括有2种方式,静态包括和动态包括. 静态包括使用<%@ include file="" %>.动态包括使用<jsp:include page=&qu ...

  8. 自学Zabbix3.6.2-触发器triggers severity严重程度

    触发器严重性定义了触发器的重要性. 1. zabbix支持以下触发级别: SEVERITY DEFINITION 颜色 Not classified 未知. 灰色 Information 一般信息. ...

  9. idea svn 设置忽略 文件

    这里的忽略一直灰色的,可以进入 这里的版本控制里进行忽略选择 或者 这里进行添加 这里有三个选择 按照顺序 1.忽略指定的文件 2.忽略文件夹下所有文件 3.忽略符合匹配规则的文件 到Commit C ...

  10. 微信小程序教学第二章(含视频):小程序中级实战教程之预备篇 - 封装网络请求及 mock 数据

    § 封装网络请求及 mock 数据 本文配套视频地址: https://v.qq.com/x/page/i05544fogcm.html 开始前请把 ch2-3 分支中的 code/ 目录导入微信开发 ...