在vue3项目中实现浏览器打印功能，可以直接使用javascript方法window.print()。如果你需要更高级的打印功能，比如打印预览、自定义打印模板等，你可能需要集成第三方库或API，以print-js为例。
效果如下：
引入PrintJS库有两种方式， 在线CDN和npm安装依赖
1.1 CDN引入：
<script src="https://printjs-4de6.kxcdn/print.min.js"></script>
1.2 npm安装：
npm install print-js –save
import printJS from 'print-js';
2. 在引入 PrintJS 库后，你可以使用 printJS() 方法来触发打印。这个方法接受两个参数：第一个参数是要打印的 HTML 元素的 ID，第二个参数是一个选项对象，用于自定义打印设置。
例如，假设你有一个 ID 为 "printFrom" 的 div，你可以这样打印它：
printJS('printFrom');
你还可以自定义打印设置。例如，以下代码将 "printFrom" div 打印成 PDF 文件，并在 PDF 文件的头部和底部添加自定义文本：
printJS({
printable: 'printFrom', // 要打印的最外层元素的id
type: 'pdf', // 打印类型，默认pdf, 还有html,image和json
header: 'My Header',
footer: 'My Footer',
documentTitle: 'My Document'
});
如果需要打印条形码， 可以使用vue3-barcode插件，但是这个插件不支持同时打印多个，最后一个总会覆盖前面的，如果只是单独打印一个条形码是完全可行性的， 如果需要循环、批量打印的话，建议使用js插件jsBarcode
安装jsbarcode
npm install jsbarcode –save
import JsBarcode from "jsbarcode";
2. 使用
<template>
<div v-for="(item, index) in newData" :key="item.id">
<img :id="'jsbarcodeImg' + index" style="width: 220px;" />
</div>
</template>
<script>
import JsBarcode from "jsbarcode";
export defaul {
data(){
return {
newData:[
{id:1, num: 12345678},
{id:2, num: 876543},
]
}
},
methods:{
getBarcode() {
this.newData.forEach((v, index) => {
JsBarcode("#jsbarcodeImg" + index, v.num+'12345678', {
format: "CODE39", // 条形码格式
width: 2, // 条形码条的宽度
height: 80, // 条形码高度
marginRight:30,
fontSize: 30,
// displayValue: false, // 是否显示条形码下方的数字， 默认true
});
});
}
}
</script>
完整代码如下：
<template>
<div id="print-template">
<div v-for="(item, index) in newData" :key="item.id">
<div style="width:20px;height: 30px;"></div>
<div>
<div style="display: inline-block">品名：{{ item?.name }}</div>
<div style="display: inline-block">RFID：{{ item?.name }}</div>
</div>
<div>
<img :id="'jsbarcodeImg' + index" style="width: 220px;" />
<qrcode-vue
:value="item?.num?.toString()"
:size="120"
:margin="5"
/>
</div>
</div>
</div>
</template>
<script>
import printJS from "print-js";
import QrcodeVue from "qrcode.vue";
import JsBarcode from "jsbarcode";
export default {
components: {
QrcodeVue,
},
data() {
return {
newData: [
{id:1, name:"乙醇", num: 12345678},
{id:2, name:"葡萄糖", num: 876543},
],
};
},
mounted() {
this.getBarcode();
setTimeout(() => {
this.handlePrint();
}, 500);
// this.changeImg();
},
beforeUnmount(){
clearTimeout()
},
methods: {
handlePrint() {
// 获取打印模板的DOM元素
const printElement = document.getElementById("print-template");
console.log(printElement);
if (printElement) {
// 显示打印模板，以便能够打印
printElement.classList.remove("print-hide");
// 使用vue-printjs打印模板内容
printJS({
printable: printElement,
type: "html",
error: (err) => {
console.log("err", err);
},
});
// 打印完成后隐藏打印模板
printElement.classList.add("print-hide");
}
},
getBarcode() {
this.newData.forEach((v, index) => {
JsBarcode("#jsbarcodeImg" + index, v.num+'12345678', {
format: "CODE39",
width: 2,
height: 80,
marginRight:30,
fontSize: 30,
// displayValue: false,
});
});
},
},
};
</script>
<style>
.print-hide {
display: none; /* 在屏幕上隐藏打印模板 */
}
</style>
原文链接：https://blog.csdn.net/weixin_64386986/article/details/136317785