2017年9月27日 星期三

[JavaScript] JavaScript Print - printThis.js

  • 現在網頁排版不在局限 Html 框架，許多人使用 Bootstrap 進行排版，但需要列印網頁頁面時，如使用 Bootstrap 排版頁面會跑版，無法列印使用者所看到的頁面
  • printThis.js ：此套件在列印時可以套用 css 的樣版
    • Step 1: 建立一個空專案，並創建 Home page
    • Step 2: 安裝  Bootstrap 
    • Step 3. 撰寫一個框架
<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Index</title>
    <link href="~/Content/bootstrap.min.css" rel="stylesheet" />
</head>
<body>
    <button type="button" class="btn btn-default" onclick="printtable('DemoPrint')">
        列印
    </button>
    <div id="DemoPrint">
        <div class="row">
            <div class="col-xs-4">.col-xs-14</div>
            <div class="col-xs-4">.col-xs-14</div>
            <div class="col-xs-4">.col-xs-14</div>
        </div>
        <div class="row">
            <div class="col-xs-4">.col-xs-24</div>
            <div class="col-xs-4">.col-xs-24</div>
            <div class="col-xs-4">.col-xs-24</div>
        </div>
        <div class="row">
            <div class="col-xs-4">.col-xs-34</div>
            <div class="col-xs-4">.col-xs-34</div>
            <div class="col-xs-4">.col-xs-34</div>
        </div>
    </div>

    <script src="~/Scripts/jquery-1.9.1.min.js"></script>
    <script src="~/Scripts/bootstrap.min.js"></script>
    <script>
        function printtable(pID) {
            console.log(pID);
            newwin = window.open('');
            newwin.document.write(document.getElementById('' + pID + '').outerHTML);
            newwin.print();
            newwin.close();
        };
    </script>
</body>
</html>
HTML
    • Step 4. 列印結果
      • 並無套用 Bootstrap 排版
    • Step 5. 安裝 printThis
    • Step 6. 使用 printThis
<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Index</title>
    <link href="~/Content/bootstrap.min.css" rel="stylesheet" />
</head>
<body>
    <button type="button" class="btn btn-default" id="printtable">
        列印
    </button>
    <div id="DemoPrint">
        <div class="row">
            <div class="col-xs-4">.col-xs-14</div>
            <div class="col-xs-4">.col-xs-14</div>
            <div class="col-xs-4">.col-xs-14</div>
        </div>
        <div class="row">
            <div class="col-xs-4">.col-xs-24</div>
            <div class="col-xs-4">.col-xs-24</div>
            <div class="col-xs-4">.col-xs-24</div>
        </div>
        <div class="row">
            <div class="col-xs-4">.col-xs-34</div>
            <div class="col-xs-4">.col-xs-34</div>
            <div class="col-xs-4">.col-xs-34</div>
        </div>
    </div>
    <script src="~/Scripts/jquery-3.2.1.min.js"></script>
    <script src="~/Scripts/bootstrap.min.js"></script>
    <script src="~/Scripts/printThis.js"></script>
    <script>
        $(function () {
            $('#printtable').click(function () {
                $("#DemoPrint").printThis({
                    debug: false,               // show the iframe for debugging
                    importCSS: true,            // import page CSS
                    importStyle: false,         // import style tags
                    printContainer: true,       // grab outer container as well as the contents of the selector
                    //loadCSS: "style.css",     // path to additional css file - use an array [] for multiple
                    pageTitle: "",              // add title to print page
                    removeInline: false,        // remove all inline styles from print elements
                    printDelay: 333,            // variable print delay; depending on complexity a higher value may be necessary
                    header: null,               // prefix to html
                    footer: null,               // postfix to html
                    base: false,                // preserve the BASE tag, or accept a string for the URL
                    formValues: false,          // preserve input/form values
                    canvas: false,              // copy canvas elements (experimental)
                    doctypeString: "",          // enter a different doctype for older markup
                    removeScripts: false,       // remove script tags from print content
                    copyTagClasses: false       // copy classes from the html & body tag
                });
            });
        });
    </script>
</body>
</html>
HTML
    • Step 6. 列印結果
張貼者： 於

沒有留言:

張貼留言

訂閱： 張貼留言 (Atom)