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

官网地址：https://www.lodop.net/download.html

先去Lodop官网下载相应的安装包

解压安装将LodopFuncs.js放在项目中utils文件夹中加一行代码

export { getLodop }; //导出

  

    

      
开始打印
        
停止打印
      

        

          
{{ item.name }}
          

            
已打印
            
未打印
          
        
      
      

        
    
  

       
  
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);
      }
    },
  },
};

    
    
.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;
}

  

已经试验过可以实现，有问题可以互相交流