html實現打印預覽效果

前面說到利用lodop插件進行打印設置，那個應用於打印快遞面單，或者跟快遞面單相似場景的情況。

今天的利用html快速打印出A4紙大小的場景，例如：合同、靜態文本等。

效果如下：

方式一

1、設置div，打印區域，最好是單放在一頁，因為需要打印的是該頁所有內容

 <div id="contractContent" style="width: fit-content"></div>

2、拼接div中需要的文本，可以設置動態數據填充

 var contractContent = '';
                contractContent += '<h1 style="text-align: right;">';
                contractContent +=
                    'html打印合同&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<span style="font-size: 14px;">編號: DxWL-0017722&nbsp;</span>';
                contractContent += '</h1>';
                contractContent += '<h1 style="text-align: center;">';
                contractContent += '<span style="font-size: 16px; font-style: italic; font-weight: bold; line-height: 18px;"></span>';
                contractContent += '</h1>';
                contractContent += '<table align="center" width="650" border="1">';
                contractContent += '<tbody>';
                contractContent += '<tr class="firstRow">';
                contractContent += '<td width="61" valign="top" style="word-break: break-all;" rowspan="2" colspan="1" align="center">';
                contractContent += '托運方（以下簡稱甲方）';
                contractContent += '</td>';
                contractContent += '<td width="114" valign="top" style="word-break: break-all;" align="center">';
                contractContent += '單位名稱';
                contractContent += '</td>';
                contractContent += '<td width="130" valign="top" style="word-break: break-all;" align="center"></td>';
                contractContent += '<td width="114" valign="top" style="word-break: break-all;" align="center">';
                contractContent += '單位地址';
                contractContent += '</td>';
                contractContent += '<td width="130" valign="top" style="word-break: break-all;" align="center"></td>';
                contractContent += '<td width="114" valign="top" style="word-break: break-all;" align="center">';
                contractContent += '公司電話';
                contractContent += '</td>';
                contractContent += '<td width="130" valign="top" style="word-break: break-all;" align="center"></td>';
                contractContent += '</tr>';
                contractContent += '<tr>';
                contractContent += '<td width="114" valign="top" style="word-break: break-all;" align="center">';
                contractContent += '起運地點';
                contractContent += '</td>';
                contractContent += '<td width="110" valign="top" align="center" style="word-break: break-all;"></td>';
                contractContent += '<td width="114" valign="top" style="word-break: break-all;" align="center">';
                contractContent += '目的地';
                contractContent += '</td>';
                contractContent += '<td width="130" valign="top" style="word-break: break-all;" align="center"></td>';
                contractContent += '<td width="114" valign="top" style="word-break: break-all;" align="center">';
                contractContent += '聯系電話';
                contractContent += '</td>';
                contractContent += '<td width="130" valign="top" style="word-break: break-all;" align="center"></td>';
                contractContent += '</tr>';
                contractContent += '<tr>';
                contractContent += '<td colspan="1" valign="top" align="center" style="word-break: break-all;" rowspan="2" width="61">';
                contractContent += '承運方（以下簡稱乙方）';
                contractContent += '</td>';
                contractContent += '<td width="114" valign="top" style="word-break: break-all;" align="center">';
                contractContent += '車牌號';
                contractContent += '</td>';
                contractContent += '<td width="130" valign="top" style="word-break: break-all;" align="center"></td>';
                contractContent += '<td width="114" valign="top" style="word-break: break-all;" align="center">';
                contractContent += '行駛證所有人';
                contractContent += '</td>';
                contractContent += '<td width="130" valign="top" style="word-break: break-all;" align="center"></td>';
                contractContent += '<td width="114" valign="top" style="word-break: break-all;" align="center">';
                contractContent += '車型';
                contractContent += '</td>';
                contractContent += '<td width="130" valign="top" style="word-break: break-all;" align="center"></td>';
                contractContent += '</tr>';
                contractContent += '<tr>';
                contractContent += '<td width="114" valign="top" style="word-break: break-all;" align="center">';
                contractContent += '駕駛員姓名';
                contractContent += '</td>';
                contractContent += '<td width="130" valign="top" style="word-break: break-all;" align="center"></td>';
                contractContent += '<td width="114" valign="top" style="word-break: break-all;" align="center">';
                contractContent += '身份證號';
                contractContent += '</td>';
                contractContent += '<td width="130" valign="top" style="word-break: break-all;" align="center"></td>';
                contractContent += '<td width="114" valign="top" style="word-break: break-all;" align="center">';
                contractContent += '聯系電話';
                contractContent += '</td>';
                contractContent += '<td width="130" valign="top" style="word-break: break-all;" align="center"></td>';
                contractContent += '</tr>';
                contractContent += '</tbody>';
                contractContent += '</table>';
                contractContent += '<p style="text-indent: 2em; line-height: normal;">';
                contractContent += '<span style="text-align: center;">經甲乙雙方友好協商，達成以下運輸條款:</span>';
                contractContent += '</p>';
                contractContent += '<p style="line-height: normal;">&nbsp; &nbsp; &nbsp; 一、甲方同意將本批貨物共____________噸(不含包裝物重量)交由乙方運輸至目的地，運價為____________元噸，運費總額為大寫人民幣______萬______仟______佰______拾元整￥____________，送達時間為______年______月______日______時前。延遲送達一天扣除乙方違約金500元，同時乙方承擔由此造成的所有損失。運費計算噸位按照貨物發運單據客戶簽收的重量或注明的產品凈重量執行，貨物名稱、性質、規格、重量、數量、價值、收貨人及其聯系方式、收貨地點等以該批貨物相對應的發運單據注明的為准。<br/></p>';
                contractContent += '<p style="line-height: normal;">&nbsp; &nbsp; &nbsp; 二、嚴禁乙方將有毒、有味產品、化學品、危險品等產品與甲方貨物混裝。若乙方在貨物中央帶易燃、易爆危險物品，以及國家規定的禁運、有害、有毒、腐蝕等物品，一經查實，混裝產品全部召回無條件銷毀，由此造成的各種損失及法律風險均由乙方承擔，且甲方有權扣除乙方未結運費。涉及法律責任的由乙方承擔。</p>';
                contractContent += '<p style="line-height: normal;">&nbsp; &nbsp; &nbsp; 三、本合同一式二份，甲乙方各執一t雙方代表簽字后生效，本次運輸業務及結算終止時合同自動終止。</p>';
                contractContent += '<p><br/></p>';
                contractContent += '<p style="line-height: normal;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;托運方代表(甲方) :&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;承運方代表(乙方):</p>';
                contractContent += '<p><br/></p>';
                contractContent += '<p style="line-height: normal;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;簽訂日期:&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;年&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;月&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;日&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;簽訂日期:&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;年&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;月&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;日</p>';
                contractContent += '<p><br/></p>';
                contractContent += '<p style="text-align: center;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;第(一)聯托運方存檔第&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;(二)聯承運方存檔</p>';
                contractContent += '<p><br/></p>';
                $("#contractContent").html(contractContent);

3、設置打印操作事件

function printContract(){
            if (!!window.ActiveXObject || "ActiveXObject" in window) { //是否ie
                remove_ie_header_and_footer();
            }
            window.print()
        }

去除不必要的頁眉頁腳，針對ie適用

 function remove_ie_header_and_footer() {
            var hkey_path;
            hkey_path = "HKEY_CURRENT_USER\\Software\\Microsoft\\Internet Explorer\\PageSetup\\";
            try {
                var RegWsh = new ActiveXObject("WScript.Shell");
                RegWsh.RegWrite(hkey_path + "header", "");
                RegWsh.RegWrite(hkey_path + "footer", "");
            } catch (e) {
            }
        }

 

方式二

方式二跟方式一的原理差不多，只不過是將頁面中一部分取出來，拼接成新的html文件，進行打印。

function Print(obj)
        {
            var str = document.getElementById(obj).innerHTML;;     //獲取需要打印的頁面元素
            str ="<html><head><meta http-equiv='Content-Type' content='text/html; charset=utf-8'></head><body>"+str+"</body></html>";
            var pwin=window.open("Print.htm","print");
            //PageSetup_Default();//設置頁眉和頁腳為默認值
            pwin.document.write(str);
            pwin.document.close();                   //這句很重要，沒有就無法實現
            pwin.print();
        }

參考：

https://blog.csdn.net/baohuan_love/article/details/49744807