1. 程式人生 > >瀏覽器打印方法總結

瀏覽器打印方法總結

按鈕 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,如下圖:

技術分享圖片

打印執行後,瀏覽器會彈出一個打印預覽對話框,確認是否進行打印的操作。

技術分享圖片

瀏覽器打印方法總結