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
javascript
<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 及时清空。 撒花 *★,°*:.☆(￣▽￣)/$:*.°★* 。