web打印总结-阿里云开发者社区

web打印总结

2017-09-05 1179

简介： 一、打印样式　　区别显示和打印的样式　　使用media="print"控制打印时的样式，如下：打印时不显示打印按钮，设置页面宽度 .toolbox { display: none; } .

+关注继续查看

一、打印样式

　　区别显示和打印的样式

　　使用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: 0 auto;
            max-width: 960px;
        }
        .table-wrap {
            width: 100%;
            height: 903px;  
        }
        table > * {
            font-size: 14px !important;
        }

        table {
            border-collapse: collapse;
            border: 1px solid black;
            width: 100%;
        }

            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: 100%;
        }

        .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: 50%;
            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: 10%;
        }

        .wp20 {
            width: 20%;
        }

        .wp50 {
            width: 50%;
        }
    </style>

html

<div class="toolbox">
            <span>提醒：在非ie打印预览时，通过预览界面的“更多设置”去掉页面上的页眉页脚。 &emsp; </span>
            <button id="btnPrint">打印</button>
            <button onclick="closeWin()">关闭页面</button>
        </div>

        @for (int index = 0; 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 = 0; j < 40; j++)
                            {
                                if (index < Model.List.Count)
                                {
                                    <tr>
                                        <td class="wp10">@(index + 1)</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 + 1) / 40 + (index % 40 > 0 ? 1 : 0))页</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") >= 0) {
                    pagesetup_null();
                }
                window.print();
            });
        });

        function closeWin() {
            window.open("", "_self").close();
        }
    </script>