【打印功能】js简单实现表格样式的数据打印，按样式打印出来

效果图

代码部分，简单三步

1，html部分：写一个表格，然后数据填进去

<div id="printable-area" v-show="false">
      <div>
        <div style="text-align: center;height: 40px;line-height: 40px;font-size: 16px;">2024-06-06</div>
        <table>
          <thead>
            <tr>
              <th>科室</th>
              <th>损伤性</th>
              <th>感染性</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td>输液室</td>
              <td>2.5</td>
              <td>1.2</td>
            </tr>
            <tr>
              <td>手术室</td>
              <td>3.5</td>
              <td>0.5</td>
            </tr>
            <tr>
              <td>中医科</td>
              <td>2.1</td>
              <td>06</td>
            </tr>
            <tr>
              <td>皮肤科</td>
              <td>2.1</td>
              <td>0.8</td>
            </tr>
            <tr>
              <td>治疗区</td>
              <td>3.4</td>
              <td>0.9</td>
            </tr>
            <tr>
              <td>总</td>
              <td>13.6</td>
              <td>4</td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>

2，css部分：把表格样式搞一搞

/* 打印显示样式 */  
table {  
    width: 100%;  
    border-collapse: collapse;  
}  
  
th, td {  
    border: 1px solid black;  
    padding: 8px;  
    text-align: left;  
}

3，js部分：这样复制过去就行了

 print(divName) {
      var printContents = document.getElementById(divName).innerHTML;
      var originalContents = document.body.innerHTML;

      document.body.innerHTML = printContents;

      window.print();
      // 刷新页面防止不可以继续点打印
      window.location.reload()
      // 恢复页面内容  
      document.body.innerHTML = originalContents;
    },

4，点击打印按钮，搞定

<el-button size="small" @click="print('printable-area')" type="primary">打印</el-button>