瀏覽器打印方法總結

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,如下圖：

 

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