vue + Lodop 实现浏览器自动打印 无需预览打印
vue
vuejs/vue: 是一个用于构建用户界面的 JavaScript 框架,具有简洁的语法和丰富的组件库,可以用于开发单页面应用程序和多页面应用程序。
项目地址:https://gitcode.com/gh_mirrors/vu/vue
免费下载资源
·
官网地址: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>
已经试验过可以实现,有问题可以互相交流
GitHub 加速计划 / vu / vue
207.54 K
33.66 K
下载
vuejs/vue: 是一个用于构建用户界面的 JavaScript 框架,具有简洁的语法和丰富的组件库,可以用于开发单页面应用程序和多页面应用程序。
最近提交(Master分支:2 个月前 )
73486cb5
* chore: fix link broken
Signed-off-by: snoppy <michaleli@foxmail.com>
* Update packages/template-compiler/README.md [skip ci]
---------
Signed-off-by: snoppy <michaleli@foxmail.com>
Co-authored-by: Eduardo San Martin Morote <posva@users.noreply.github.com> 4 个月前
e428d891
Updated Browser Compatibility reference. The previous currently returns HTTP 404. 5 个月前
更多推荐
已为社区贡献4条内容
所有评论(0)