vue + Lodop 实现浏览器自动打印无需预览打印

官网地址：https://www.lodop.net/download.html
先去Lodop官网下载相应的安装包
解压安装将LodopFuncs.js放在项目中utils文件夹中加一行代码

export { getLodop }; //导出

<template><div><div class="main"><ul class="btns"><li @click="start">开始打印</li><li @click="end">停止打印</li></ul><div class="user" v-if="list.length"><div class="userList" v-for="(item, index) in list" :key="index"><div>{{ item.name }}</div><div class="status"><div v-if="item.status">已打印</div><div v-if="!item.status">未打印</div></div></div></div><div v-if="!list.length" class="img"><img src="../../assets/errs.png" alt="" /></div></div></div>
</template><script>
import { getUnprintedList } from "@/utils/http.js";
import { getLodop } from "@/utils/LodopFuncs"; 
export default {data() {return {timer: null,list: [],beforeList: [],id: 2,};},created() {this.$store.commit("setPath", "/activityList");this.getListBefore();},methods: {async getListBefore() {const { data: res } = await getUnprintedList({activityId: this.$route.query.id,});if (!res.content) {return this.$message.warning("没有需要打印的信息了");}res.content.forEach((item) => {if (item.remark) {if (item.remark.length > 21) {item.firstPart = item.remark.substring(0, 21);item.secondPart = item.remark.substring(21);}}});this.list = res.content;this.id = 1;},start() {this.timer = setInterval(() => {this.getList();}, 7000); // 每7秒请求一次接口},end() {if (this.timer) {clearInterval(this.timer);}},async getList() {if (this.id == 1) {this.list.forEach((item) => {item.status = true;});this.beforeList = this.list;this.id = 2;this.forList();return;}this.list.forEach((item) => {item.status = true;});const { data: res } = await getUnprintedList({activityId: this.$route.query.id,});this.id = 2;if (!res.content) {if (this.timer) {clearInterval(this.timer);}return this.$message.warning("没有需要打印的信息了");}res.content.forEach((item) => {if (item.remark) {if (item.remark.length > 21) {item.firstPart = item.remark.substring(0, 21);item.secondPart = item.remark.substring(21);}}});this.beforeList = res.content;res.content.forEach((item) => {this.list.unshift(item);});console.log(this.list);//   return;this.forList();},forList() {this.beforeList.forEach((item) => {this.btnClickPrint(item);});},// 打印快递单btnClickPrint(data) {let tops = 30;if (data.position.length > 9) {tops = 50;}const LODOP = getLodop(); // 调用getLodop获取LODOP对象LODOP.PRINT_INIT("");LODOP.SET_PRINT_PAGESIZE(1, "55mm", "60mm", ""); // 设置纸张大小LODOP.ADD_PRINT_TEXT(0, 0, 170, 20, `姓名：${data.name}`);LODOP.ADD_PRINT_TEXT(15, 0, 160, 20, `职位：${data.position}`);LODOP.ADD_PRINT_TEXT(tops, 0, 160, 20, `公司：${data.companyName}`);if (data.firstPart) {LODOP.ADD_PRINT_TEXT(120, 0, 160, 20, `备注：${data.firstPart}`);LODOP.ADD_PRINT_TEXT(155, 0, 160, 20, `${data.secondPart}`);} else {LODOP.ADD_PRINT_TEXT(120, 0, 160, 20, `备注：${data.remark}`);}//   LODOP.ADD_PRINT_TEXT(130, 10, 150, 20, " ");// LODOP.SET_PRINT_STYLEA(0, "UseStyle", 1);//   LODOP.PREVIEW(); // 预览并打印、LODOP.PRINT();},beforeDestroy() {// 清除定时器if (this.timer) {clearInterval(this.timer);}},},
};
</script><style scoped lang='scss'>
.main {background: #fff;min-height: 400px;padding-top: 1px;margin-top: 20px;border-radius: 10px;
}
.btns {margin: 24px;display: flex;cursor: pointer;
}.btns > li:nth-of-type(1) {width: 146px;height: 44px;background: linear-gradient(214deg, #059ff4 0%, #0266e6 100%);box-shadow: 0px 2px 10px 0px rgba(3, 107, 231, 0.6);border-radius: 4px;font-size: 18px;font-family: SourceHanSansCN, SourceHanSansCN;font-weight: 500;color: #ffffff;line-height: 27px;text-shadow: 0px 2px 10px rgba(3, 107, 231, 0.6);text-align: center;line-height: 44px;margin-right: 40px;
}.btns > li:nth-of-type(2) {width: 146px;height: 42px;border-radius: 4px;border: 2px solid #026ce7;font-size: 18px;font-family: SourceHanSansCN, SourceHanSansCN;font-weight: 500;color: #026ce7;text-align: center;line-height: 42px;margin-right: 40px;
}
.user {display: flex;box-sizing: border-box;padding: 20px;flex-wrap: wrap;
}
.userList {background: #e5e4ff;border-radius: 4px;color: #000;margin-bottom: 6px;width: 80px;height: 70px;line-height: 70px;text-align: center;margin-right: 10px;font-size: 14px;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;position: relative;cursor: pointer;
}
.status {position: absolute;bottom: 2px;right: 0px;background: #999999;line-height: 20px;font-size: 12px;color: #fff;width: 50px;border-radius: 4px;opacity: 0.4;
}
.img {text-align: center;padding-bottom: 170px;
}
.img > img {width: 500px;
}
</style>