web打印总结

简介: 一、打印样式   区别显示和打印的样式    使用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里用于打印的属性

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: 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>

 

参考与分享:

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

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

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

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

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

Google Chrome打印分页符

web打印中如何强制分页

相关文章
|
Web App开发 前端开发
chrome浏览器web打印需要了解的几个小技巧
当我们使用web打印相关的解决方案的时候,还有不少小坑值得注意下,同时需要了解几个小技巧提升在web打印上的友好度,以下整理一些常见的小技巧
chrome浏览器web打印需要了解的几个小技巧
|
前端开发 JavaScript
|
Web App开发
Web蓝牙打印Demo以及Webbluetooth的用法
Web蓝牙打印Demo以及Webbluetooth的用法
1155 0
|
Web App开发 开发工具 Android开发
Flutter Web:运行后console中不停的打印debug日志
我们用android studio直接运行flutter web项目,会启动chrome来执行,这时候如果我打开开发者工具(右键-》检查),就会发现非常卡 (前提是用Html Render来渲染,用CanvasKit好像就没问题) 在console上边的操作栏上可以看到一个数字在不停的增长,这是因为console默认不显示debug日志,所以这些日志回以计数的形式显示。我们在操作栏的level中将debug选中,就会看到debug日志了。
749 0
|
Web App开发 前端开发 JavaScript
如何在 SAP UI5 应用中集成第三方库 :一个在移动设备上查看 Web 应用打印调试信息的小技巧
如何在 SAP UI5 应用中集成第三方库 :一个在移动设备上查看 Web 应用打印调试信息的小技巧
如何在 SAP UI5 应用中集成第三方库 :一个在移动设备上查看 Web 应用打印调试信息的小技巧
打印SAP ABAP web service call完整的payload
打印SAP ABAP web service call完整的payload
127 0
|
Web App开发 C#
C# web项目利用docx文档作为模板~为打印专做的解决方案
还是那句话:十年河东,十年河西,莫欺少年穷。 目前,web端打印技术有很多,有收费的专业web打印控件,大家可以参考我的上一篇博客。当然,很多公司不愿意出钱,那么今天咱们就探讨下怎么做免费的打印。 web端JS技术很强大,JS也提供了简单的打印方法,大家可参考JQprint()方法,这个方法网上有很多说明,在我的上一篇博客中也有提到,可以简单实现打印功能,大家可自行查询资料,在此不作说明。
1318 0
|
Web App开发 JavaScript 前端开发