web列印總結

芝麻軟體發表於2017-09-05
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裡用於列印的屬性

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列印中如何強制分頁


相關文章