vue2 打印标签功能 用于10cm*10cm纸张

1:例图如下 （html布局可自定义修改）

2：代码如下（大致的思路是 打印时 先把打印的区域转换成图片，然后在用printJS打印出图片，这样布局和样式就不会丢失。）

html2canvas：中文网址（更多属性和方法可查看官网）

print-js：官方网址（更多属性和方法可查看官网）

我用的版本，不需要 （vue-qr：二维码）的可不用安装

npm install html2canvas@1.4.1

npm install print-js@1.6.0

npm install vue-qr@4.0.9

<template>
  <div >
    <el-button type="primary" @click="printBtn">打印按钮</el-button>
    <div  style="text-align:center;">
     <img v-if="imageUrl" :src="imageUrl" style="width: 400px;" />
    <div v-else="!imageUrl" ref="materialCard" class="material-card">
      
    <h2 class="card-title">标识卡</h2>
    <table>
      <tr>
        <td>编码</td>
        <td colspan="2" class="contentText">{{ materialCode }}</td>
        <td>名称</td>
        <td colspan="2" class="contentText">{{ materialName }}</td>
        
      </tr>
      <tr>
        <td>规格</td>
        <td colspan="2" class="contentText">{{ specification }}</td>
        <td>型号/合金</td>
        <td colspan="2" class="contentText">{{ model }}</td>
      </tr>
      <tr>
        <td>项目</td>
        <td colspan="2" class="contentText"></td>
        <td>供应商</td>
        <td colspan="2" class="contentText"></td>
      </tr>
      <tr>
        <td>数量/重量</td>
        <td colspan="2" class="contentText">{{ quantity }}</td>
        <td colspan="2" rowspan="5" class="qr-code-cell">
          <vue-qr
          ref="qrCode"
          text="10245787878788"          
          style="width: 100%;height: -webkit-fill-available;"
        ></vue-qr>
        </td>
      </tr>
      <tr>
        <td>料框编号</td>
        <td colspan="2" class="contentText"></td>
      </tr>
      <tr>
        <td>批次号</td>
        <td colspan="2" class="contentText">{{ batchNumber }}</td>
      </tr>
      <tr>
        <td>订单号</td>
        <td colspan="2" class="contentText"></td>
      </tr>
      <tr>
        <td>生产日期</td>
        <td colspan="2" class="contentText">{{ productionDate }}</td>
      </tr>
    </table>
  </div>
    </div>
    
  </div>
</template>

<script>
//html转换成图片
import html2canvas from 'html2canvas';
//打印插件
import printJS from "print-js";
//二维码
import VueQr from "vue-qr";
export default {
  computed: {
    
  },
  created () {
  },
  mounted () {
  },
  data () {
    return {
      imageUrl: "",
      materialCode: '14-03565-460',
      materialName: 'PN8-C边框一',
      specification: '4600mm',
      model: 'ND-3565/6061',
      quantity: '10PCS/276KG',
      batchNumber: 'J2405013Ab04001-121',
      productionDate: '2024-06-26',
      
    }
  },
  
  components: {    
    
  },
  methods: {
    
    async printBtn() {
      const scale = 20;
      html2canvas(this.$refs.materialCard, {
        scale: scale,
        windowWidth: this.$refs.materialCard.scrollWidth * scale,
        windowHeight: this.$refs.materialCard.scrollHeight * scale
      }
      ).then(canvas => {
        this.imageUrl = canvas.toDataURL('image/png');
        this.printPDF();
      }).catch(error => {
        console.error('生成图片失败:', error);
        // 可以在这里添加错误处理，比如显示错误消息给用户
      });
    },
    
   
   
    
    async printPDF() {
      
      printJS({
        printable: this.imageUrl, // 标签元素id
        type: "image",
        style: `
            @page { size: auto; margin: 0mm; }
            @media print {
              img { max-width: 100%; height: auto; }
            }
          `
      });
      
    },
  }
}
</script>
<style  >

.material-card {
  width: 400px; /* 增加宽度以适应更多列 */
  border: 1px solid black;
  padding: 10px;
  font-family: Arial, sans-serif;
  margin: 0 auto;
}

.card-title {
  text-align: center;
  margin-bottom: 10px;
  font-weight: bold;
  font-family: "黑体";
  font-size: 14px;
}

table {
  width: 100%;
  border-collapse: collapse;
}

td {
  border: 1px solid black;
  padding: 5px;
  height: 25px; /* 设置一个固定高度使行高一致 */
  font-size: 12px;
    font-weight: 800;
    font-family: "黑体";

}
.contentText{
  font-family: "仿宋";
  
}
.qr-code-cell {
  
  vertical-align: middle;
  text-align: center;
}

.qr-code {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}
</style>

3：如果取消了打印，图片会把html覆盖，这样就不能进行复制操作；

解决办法1：是把图片定位到html下面，层级为-1（需要有背景色，可以设置成白色，不然会重叠），然后把v-if 改成v-show 。

解决办法2：是把图片设置透明，然后把v-if 改成v-show。

4：关闭页面或者关闭弹窗时记得把imageUrl 及时清空。 撒花 *★,°*:.☆(￣▽￣)/$:*.°★* 。