JavaScript 實現打印功能

前端時間在做管理系統的時候接觸到了頁面打印，網上各種查找資料后，最終找到了一個如下解決方法：

 

handlePrint() {
                var printHtml = document.getElementById('print').innerHTML
                var oldstr = document.body.innerHTML
                window.document.body.innerHTML = printHtml
                window.print()
                document.body.innerHTML = oldstr
                return false
            }

1、首先得到需要打印的HTML內容（注：HTML里面的樣式最好使用內聯樣式，因為剛開始我使用的class樣式在打印的時候失效了！最后全部改成內聯樣式才沒有失效！）

var printHtml = document.getElementById('print').innerHTML

2、保存當前頁面的整個HTML，之后便於恢復

var oldstr = document.body.innerHTML

3、把當前頁面替換成需要打印的HTML

 window.document.body.innerHTML = printHtml

4、執行打印操作

window.print()

5、還原當前頁面

document.body.innerHTML = oldstr

如果需要新開瀏覽器對話框打印，則使用下面的方法：

1、獲取需要打印的元素HTML

　　var printHtml = document.getElementById("myDiv").innerHTML;//這個元素的樣式需要用內聯方式，不然在新開打印對話框中沒有樣式

2、打開一個窗口，且內容設置為空

　　var wind = window.open("",'newwindow', 'height=300, width=700, top=100, left=100, toolbar=no, menubar=no, scrollbars=no, resizable=no,location=n o, status=no');

3、將新窗口內容填充為需要打印的HTML

　　wind.document.body.innerHTML = printHtml;

4、執行打印操作

　　wind.print();

 

橫向打印、縱向打印，去掉頁腳頁眉等樣式：

<style media="print">
@page {
    size: portrait;  // portrait縱向打印   landscape橫向打印
    /* 去掉頁眉頁腳 */
    size: 210mm 290mm​; /* auto is the initial value */
    margin: 0mm auto;
}
</style>