js實現頁面列印
阿新 • • 發佈：2018-12-11
js有多種方式實現列印
window.print()
window.print();會彈出列印對話方塊，列印的是window.document.body.innerHTML中的內容,但是iframe中無法使用需要用 document.execCommand(“print”)
<body>
<div id="print_html">這裡是要列印的html內容</div>
<input type="button" name="button_print" value="列印" onclick="javascript:printHTML()">
< document.execCommand(“print”)
該方式也相容各個版本的瀏覽器，同window.print()一樣，其啟動的是列印對話方塊
iframe中列印
main.html
<body>
<button type="button" id="printBtn">列印</button>
<iframe frameborder="0" src="" id="printFrame" style="width: 0;height: 0;"></iframe>
<script type="text/javascript" src="./js/jquery-3.1.1.js"></script>
<script type="text/javascript">
$("#printBtn").click(function() {
$("#printFrame").attr('src', './printIframe.html');
})
</script>
</body>
printIframe.html
<head>
<meta charset="UTF-8">
<title>ifrom列印</title>
<style type="text/css" media="print">
html {
height: 100%;
width: 100%;
}
</style>
<script type="text/javascript" src="./js/jquery-3.1.1.js"></script>
</head>
<body style="padding: 0;margin: 0;height: 100%;width: 100%;">
<div id="printBody" style="width: 100%;height: 100%;">
<span style="display:block;position:absolute;top:50%;left:50%;">
我正在被列印
</span>
</div>
<script type="text/javascript">
var infoHtml = '<span style="display:block;position:absolute;top:0%;left:0%;">我正在被列印</span>';
document.execCommand("print");
</script>
</body>
JQuery外掛
<head>
<meta http-equiv=Content-Type content="text/html; charset=utf-8">
<title>JQuery列印</title>
<script type="text/javascript" src="./js/jquery-3.1.1.js"></script>
<script language="javascript" src="./js/jquery.print.js"></script>
</head>
<body style='margin:0 auto;'>
<div id='ganburenmianbaio'>
我在等待被列印
</div>
<button id='button_print' name='button_print' onclick="javascript:printit()">列印</button>
</body>
<script language="javascript">
function printit() {
$("#ganburenmianbaio ").print({ iframe: true, prepend: '<br/>' });
}
</script>
列印預覽
可以參考：https://blog.csdn.net/yongchao940/article/details/73129425
chrome瀏覽器、win10自帶的IE瀏覽器 呼叫列印彈出的列印設定介面中包含列印預覽部分，故其通過上面的列印函式的呼叫即可實現
IE9以後的版本、火狐不支援webbrowser控制元件了，JS調用不了瀏覽器的列印預覽的功能，我們只能用iframe模擬列印預覽的對話方塊，將需要列印的內容顯示在該對話方塊中，然後在呼叫列印的功能實現列印。
jquery列印預覽外掛下載地址：https://github.com/etimbo/jquery-print-preview-plugin