阅读量:0
官网地址：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> 已经试验过可以实现，有问题可以互相交流
