最近在開發一個項目，需要用到PC端打印的功能，很多都會去引入一個第三方的JS來做，其實打印功能很簡單，調用瀏覽器的打印功能就可以實現。
代碼示例：
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>打印</title> </head> <body> <button class="printBtn" id="printBtn">打印</button> <h1>這塊內容不需要打印</h1> <!--startprint--> <div class="print-content" style="background: red;"> <h1>我是需要打印內容開始.....</h1> <img src="images/img1.jpg" alt=""> <h1>我是需要打印內容結束.....</h1> </div> <!--endprint--> <h1>這塊內容不需要打印</h1> <script type="text/javascript"> var printBtn = document.getElementById('printBtn'); printBtn.onclick = function(){ doPrint(); } function doPrint() { bdhtml=window.document.body.innerHTML; sprnstr='<!--startprint-->'; eprnstr='<!--endprint-->'; prnhtml=bdhtml.substr(bdhtml.indexOf(sprnstr) + 17); prnhtml=prnhtml.substring(0, prnhtml.indexOf(eprnstr)); window.document.body.innerHTML=prnhtml; window.print(); } // 此處爲圖文打印 function printQrCode(idstr) { const imgUrlStr = 'https://weiliicimg9.pstatp.com/weili/l/905526294583705654.jpg'; let iframe = document.createElement('IFRAME'),doc = null,img = new Image(); img.src = imgUrlStr; iframe.setAttribute('style', 'position:absolute;width:0px;height:0px;left:-500px;top:-500px;'); document.body.appendChild(iframe); doc = iframe.contentWindow.document; doc.write('<h2>Print Pictures and Words</h2>'); doc.body.append(img); doc.close(); iframe.onload = function() { //解決圖片顯示不了的問題 iframe.contentWindow.focus(); iframe.contentWindow.print(); document.body.removeChild(iframe); }; } </script> </body> </html>
方法二：使用一個js
示例：jquery.printarea.js
(function ($) { var printAreaCount = 0; $.fn.printArea = function () { var ele = $(this); var idPrefix = "printArea_"; removePrintArea(idPrefix + printAreaCount); printAreaCount++; var iframeId = idPrefix + printAreaCount; var iframeStyle = 'position:absolute;width:0px;height:0px;left:-500px;top:-500px;'; iframe = document.createElement('IFRAME'); $(iframe).attr({ style: iframeStyle, id: iframeId }); document.body.appendChild(iframe); var doc = iframe.contentWindow.document; $(document).find("link").filter(function () { return $(this).attr("rel").toLowerCase() == "stylesheet"; }).each( function () { doc.write('<link type="text/css" rel="stylesheet" href="' + $(this).attr("href") + '" >'); }); doc.write('<div class="' + $(ele).attr("class") + '">' + $(ele).html() + '</div>'); doc.close(); var frameWindow = iframe.contentWindow; frameWindow.close(); frameWindow.focus(); frameWindow.print(); } var removePrintArea = function (id) { $("iframe#" + id).remove(); }; })(jQuery);
使用方法：
<script type="text/javascript" src="js/jquery.printarea.js"></script> <script type="text/javascript"> $(".main-resume-btn .print").click(function(){ $(".main-resume-details").printArea(); }); </script>
打完收工！