简单的浏览器打印demo（兼容chrome/IE/firefox，表现略有差异）

程序员文章站 2022-07-01 12:57:58

...

目前在chrome/IE11/firefox下都能运行，但效果略有差异，只有chrome有预览功能。
chrome效果：
简单的浏览器打印demo（兼容chrome/IE/firefox，表现略有差异）
firefox效果：

IE效果图：

代码：

<!doctype html>
<html lang='en'>
<head>
    <meta charset='UTF-8'>
    <meta name='viewport'
          content='width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0'>
    <meta http-equiv='X-UA-Compatible' content='ie=edge'>
    <title>打印</title>
    <style>
        #printPage {
            display: none;
        }
    </style>
</head>
<body>
哈哈哈，拜托打印机了
<button onclick='printPage()'>戳我打印</button>
<!--实际要打印的内容放在这个div中-->
<div id='printPage'>
    <h1>打印标题</h1>
    <table>
        <thead>
        <th>name</th>
        <th>title</th>
        <th>level</th>
        </thead>
        <tbody>
        <tr>
            <td>小明</td>
            <td>前端工程师</td>
            <td>资深专家</td>
        </tr>
        </tbody>
    </table>
</div>
<!--以上 实际要打印的内容-->
<script>
  function printPage() {
    var printHTML = document.getElementById('printPage').innerHTML;// 获取要打印的内容
    var page = window.open('', '_blank');// 打开一个新窗口，用于打印
    page.document.write(printHTML);// 写入打印页面的内容
    page.print();// 打印
    var userAgent = navigator.userAgent;
    if ((userAgent.indexOf('compatible') > -1 && userAgent.indexOf('MSIE') > -1) || (userAgent.indexOf("Edge") > -1) || (userAgent.indexOf('Trident') > -1 && userAgent.indexOf("rv:11.0") > -1)) {
      // IE浏览器
      page.document.execCommand('print');
    } else {
      console.log('not IE');
    }
    page.close();// 关闭打印窗口
  }
</script>
</body>
</html>