笔记

Appearance

大纲

批量打印 ​

原生 print ​

相关 API

  • print()
  • CSS page-break-after: always;: 对打印页面进行分隔
  • 事件 beforeprint: 调用 print() 后触发，此时未真实进行打印
  • 事件 afterprint: 打印界面选择 打印 或 取消 后触发，无论实际是否打印

缺陷

  • 需要一次性加载完数据，对于大数据量页面难以处理
  • 无法得知真实打印结果，如对缺纸等异常状态无法处理

借助 lodop ​

lodop 是一个打印插件，启用后本地会开启一个服务，对接物理打印状态；
lodop 本身提供了一套页面渲染的语法，也可以直接打印 html 内容;
使用 html 进行输出时，样式部分需要采用内联格式编写

注意：

  • lodop 需要用户手动安装对应插件
  • lodop 仅支持 windows 系统

引入 lodop ​

  1. 下载https://www.lodop.net/download.html 发行包
  2. 找到示例，打开 lodopFuncs.js 文件
  3. 其中 getLodop 为获取 lodop 逻辑

同步批量 ​

一次性加载需要打印的内容，并使用 LODOP.NewPage() 进行手动分页

异步批量 ​

  1. 设置完打印内容后，在 On_Return 中记录当前 JobId, 调用 .PRINT 打印单张
  2. 打印开始后，修改 On_Return 回调，并定时查看打印状态
  3. 判断打印完成后，移除定时器, emit 打印完成事件
  4. 获取下一张打印内容并重复上述过程知道结束
js
// 流程示例，这里隐去了加载逻辑
const LODOP = loadLODOP()
const printManage = new Vue
export default {
  data() {
    return {
      current: -1,
      totalItem: 1000
    }
  }
  methods: {
    getPrintContent() {
      return `<body>${this.$refs.printContent.$el.innerHTML}</body>`;
    },
    async singlePrint(i) {
      var CurrentJob;
      this.current = i;
      await this.$nextTick(); // 订单渲染
      LODOP.PRINT_INIT(`打印第${i}张`);
      LODOP.SET_PRINT_MODE("CATCH_PRINT_STATUS", true);
      const printHTML = this.getPrintContent();
      LODOP.ADD_PRINT_HTM(0, 40, "100%", "100%", printHTML);
      LODOP.On_Return_Remain = true;
      LODOP.On_Return = function (TaskID, Value) {
        console.log("==== 当前Job ====: ", Value);
        CurrentJob = Value;
      };
      LODOP.PRINT();

      var interval = setInterval(() => {
        if (!CurrentJob) return;
        LODOP.On_Return = function (TaskID, Value) {
          // Value: 0-打印完成 1-打印中
          if (Value == 0) {
            console.log(`    第${i}张打印完成`);
            clearInterval(interval);
            printManage.emit("printFinished", i);
          } else {
            console.log(`    正在打印第${i}张`);
          }
        };
        LODOP.GET_VALUE("PRINT_STATUS_EXIST", CurrentJob);
      }, 1000);
    },
    multiPrint() {
      this.loading = true;
      printManage.rm("printFinished");
      printManage.on("printFinished", i => {
        if (i < this.totalItem - 1) {
          this.singlePrint(i + 1);
        } else {
          this.$alert(
            "打印传输完毕，请等待打印机完成打印内容",
            "状态确认"
          ).then(() => {
            this.current = -1;
            this.emitClose("finished");
          });
        }
      });
      this.singlePrint(0);
    },
  },
};