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>