瀏覽器打印方法總結
阿新 • • 發佈:2018-05-18
按鈕 http RM 實現 target doc substring head 我們
1. 關於打印,瀏覽器有自帶的打印方法,但是有個問題就是它只能打印整個頁面。如果需要打印局部會比較麻煩。具體實現方法可以看下面代碼:
function doPrint() { bodyHtml = window.document.body.innerHTML; sPrintStr = "<!--startprint-->"; //開始打印標識字符串有17個字符 ePrintStr = "<!--endprint-->"; //結束打印標識字符串 printHtml = bodyHtml.substr(bodyHtml.indexOf(sPrintStr) + 17); //從開始打印標識之後的內容 printHtml = printHtml.substring(0, printHtml.indexOf(ePrintStr)); //截取開始標識和結束標識之間的內容 window.document.body.innerHTML = printHtml; //把需要打印的指定內容賦給body.innerHTML window.print(); //調用瀏覽器的打印功能打印指定區域 window.document.body.innerHTML = bodyHtml;//重新給頁面內容賦值; }
在HTML 頁面中,我們需要在打印的區域加個開始與結束的標識符。如下圖所示:
2. 用 printThis插件 實現局部打印。
使用方法如下:
1.引用該 JS,具體路徑請根據自己實際情況來改寫:
<script src="/assets/pages/scripts/jquery.printarea.js" type="text/javascript"></script>
2.聲明需要打印的區域:
3.執行打印的代碼:
$(".js_print_receipt").click(function(){ $("#receiptPrintArea").printThis({ debug: false, importCSS:true, importStyle: true, printContainer: true, pageTitle: "", removeInline: false, printDelay: 333, header: null, formValues: true }); });
js_print_receipt 有打印按鈕的class,如下圖:
打印執行後,瀏覽器會彈出一個打印預覽對話框,確認是否進行打印的操作。
瀏覽器打印方法總結