前端打印功能实现（原生实现，无需导任何包）

打印功能实现

效果预览

---

一、html 写法

<div id="exportableTable" style="display: none;">
      <table border="1" style="border-collapse:collapse;width: 100%;text-align: center;">
        <tr rowspan="2">
          
          <th colspan="7">经费账(科目：)th>
        tr>
        <tr cospan="7">
          
          <th rowspan="2">日期th>
          <th rowspan="1">凭证th>
          <th rowspan="2">摘要th>
          <th rowspan="2">收方th>
          <th rowspan="2">付方th>
          <th rowspan="2">收或付th>
          <th rowspan="2">余额th>
        tr>
        <tr cospan="7">
          
          <th rowspan="1">顺序号th>
        tr>
        
        <tr>
          <td>1td>
          <td>2td>
          <td>3td>
          <td>4td>
          <td>5td>
          <td>6td>
          <td>7td>
        tr>
      table>
    div>

二、js或ts写法

代码如下（示例）：

    printFee () {

      const printContent = document.getElementById("exportableTable");

      // window.open() 弹出窗口
      const WindowPrt = window.open('', '', 'left=500px,top=500px,width=900,height=900,toolbar=0,scrollbars=0,status=0');//弹出一个空的窗口（设置好宽高）

      // write()方法用于写入文档内容，可以传多个参数，写入的字符串会按HTML解析
      WindowPrt.document.write(printContent.innerHTML);

      // 运行document.write()，运行完后，最好手动关闭文档写入document.close()
      WindowPrt.document.close();

      //方法将焦点设置到当前窗口，也就是将窗口显示在前（靠近屏幕）
      WindowPrt.focus();

      // 调用 print() 方法会产生一个打印预览弹框，让用户可以设置打印请求。
      WindowPrt.print();

      // window.close()关闭浏览器窗口
      WindowPrt.close();
    }

总结

关键在于html要使用 id=‘exportableTable’ ， js通过document.getElementById(“exportableTable”)将要打印的内容获取，
通过.write(）写入文档内容到新弹出的窗口，
再调用 print() 方法产生一个打印预览弹框，即可实现打印