web打印总结

一、打印样式

　　区别显示和打印的样式

　　使用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里用于打印的属性

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打印中如何强制分页