天天看點

js浏覽器的列印和去除頁眉和頁腳

<div id="print-conent">

        <div id="title" style="text-align:center;font-weight:bolder;font-size:16px;">
            <h4><span>患者姓名【{{vm.patientName}}】</span><span>性别【{{vm.sex}}】</span><span>透析病案号【{{vm.patientNo}}】</span></h4>
        </div>
        <div id="printDialysisDetectionPage">

            <table ng-table="vm.tableTxjl" class="table">
                <colgroup>
                    <col width="8%">
                    <col width="10%">
                    <col width="8%">
                    <col width="10%">
                    <col width="12%">

                    <col width="16%">
                    <col width="8%">
                    <col width="10%">
                    <col width="8%">
                    <col width="10%">

                </colgroup>
                <tr ng-repeat="item in vm.printList">
                    <td>
                        <div class="conent1">
                            <div class="row date">
                                <div class="col-md-12">日期:{{item.date|date:yyyy-MM-dd}}</div>
                            </div>
                            @*<div>{{item.content1}}</div>*@
                            <div ng-bind-html="item.content" style="font-size:13px;"></div>
                            <div class="creatorUserName" style="text-align:right">
                                <span>醫生:{{item.creatorUserName}}</span>
                            </div>

                        </div>
                    </td>
                </tr>

            </table>
        </div>

    </div>
           

js

//去除頁眉和頁腳
    window.οnbefοreprint = beforePrint;
    window.οnafterprint = afterPrint; 
    function beforePrint() {
        $('.navbar').hide();  //隐藏頭部
        $('#page-header').hide(); //隐藏面包屑
        $('#block-region-side-pre').hide(); //隐藏左側導航欄
        
    }
    //列印之後将隐藏掉的資訊再顯示出來 
    function afterPrint() {

        $('.navbar').show();  //顯示頭部
        $('#page-header').show(); //顯示面包屑
        $('#block-region-side-pre').show(); //顯示左側導航欄
    }
  
    vm.myPreview = function () {
        var printConent = document.getElementById('print-conent').innerHTML;
        var page = window.open('', '_blank');// 打開一個新視窗,用于列印
        console.log(page,"page");
        page.document.write(printConent);// 寫入列印頁面的内容
      
        page.print();// 列印
        var userAgent = navigator.userAgent;
        if ((userAgent.indexOf('compatible') > -1 && userAgent.indexOf('MSIE') > -1) || (userAgent.indexOf("Edge") > -1) || (userAgent.indexOf('Trident') > -1 && userAgent.indexOf("rv:11.0") > -1)) {
            // IE浏覽器
            page.document.execCommand('print');
        } else {
            console.log('not IE');
        }
        page.close();// 關閉列印視窗

    }