Bootstrap

【打印功能】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>
;