element 使用printJS调用打印功能

1.安装依赖

npm install print-js --save

2.在main.js中全局引用

import printJS from 'print-js';

3.在页面中使用

          <el-button type="success" plain icon="Printer" :disabled="single" @click="handlePrint">打印</el-button>
  <div style="white-space:pre-wrap" id="fileId" class="hidden-on-screen">
    <table border="1" style="border-collapse: collapse;font-size: 13px;width: 100%;">
      <tbody>
        <tr>
          <th>设备分类</th>
          <th>设备类型</th>
          <th>品牌</th>
          <th>型号</th>
        </tr>
        <tr v-for="(item, index) in resLoanItemList" :key="index" style="text-align: center;">
          <td>{{ item.deviceClassName }}</td>
          <td>{{ item.deviceTypeName }}</td>
          <td>{{ item.brand }}</td>
          <td>{{ item.model }}</td>
        </tr>
      </tbody>
    </table>
  </div>
<script setup>

function handlePrint() {
// 获取选中的id
  const _id = ids.value
// 调用接口
  getloanDetail(_id).then(res => {
    resLoanItemList.value = res.data.resLoanItemList
    nextTick(() => {
      printJS({
        printable: 'fileId', // 确保页面上有一个 ID 为 fileId 的元素  
        type: 'html',
        scanStyles: false, // 如果不需要扫描并包含页面的样式，可以设置为 false  
        style: `  
        table tr td, th {  
          font-size: 10px;  
          border-collapse: collapse;  
          padding: 5px 0;  
          text-align: center;  
          border: 1px #000 solid;  
        }  
        table {  
          width: 100% !important;  
          border-collapse: collapse;  
        }  
        @page { margin: 5mm 17mm; }  
      `
      });
    })
  }).catch(error => {
    console.error('Error fetching loan detail:', error);
  });

}
</script>