针对windows环境下的vue项目中如何利用lodop控件实现打印的功能，不支持mac环境

下载安装

首先去lodop官网下载中心下载相关的包，完成安装

重点关注前四个文件，安装第一个文件，在第二个文件和第三个文件中根据电脑系统选一个安装。将第四个文件放在项目的assets文件夹下面。

代码中使用

由于不好控制分页的时候，切纸的位置，于是换了一种方式，代码控制每一页的内容的地方使用LODOP.NewPageA();实现手动分页，这种方式可以保证切纸位置不会跑偏。

//首先引入相关的js
import { getLodop } from "../../../../assets/Lodop/LodopFuncs.js";
//点击打印时，先检查一下系统是否已经安装控件，如果没有弹窗给出下载地址和提示，给用户一个良好的体验感，如果有去获取打印信息
    CheckIsInstall() {
      try {
        var LODOP = getLodop();
        if (LODOP.VERSION) {
          if (LODOP.CVERSION) {
            this.getInfo();
          } else {
            alert("本机已成功安装了Lodop控件！\n 版本号:" + LODOP.VERSION);
          }
        }
      } catch (err) {
        this.$alert('<a href="http://www.lodop.net/download.html" target="_blank">请点击链接，下载安装插件后重试。</a>', "提示", {
          dangerouslyUseHTMLString: true,
          callback: () => {
            location.reload();
          }
        });
      }
    },
   //获取打印内容信息 获取到打印配置信息后，去设置文本的文字大小信息等，调用打印函数
    getInfo() {
      let obj = {
        codes: code
      };
      baseService.get("/base/templateprintinfo/getReceiveDetailPrintInfo", obj).then((res) => {
        if (res.code !== 0) {
          return this.$message.error(res.msg);
        }
        this.$nextTick(() => {
          this.setFontSize();
        });
        setTimeout(() => {
          // // 调用打印函数
          this.lodopPrint();
        }, 500);
      });
    },
    //打印函数
     lodopPrint() {
      setTimeout(() => {
          let printData = this.printForm.printers;
      let PageWidth = Number(this.printForm.paperWidth) * 10; //根据后端返回的打印配置信息设置纸张宽度
      let PageHeight = Number(this.printForm.paperHide) * 10;//根据后端返回的打印配置信息设置纸张高度
      let top = this.printForm.topMargin;//根据后端返回的打印配置信息设置上边距
      let left = this.printForm.leftMargin;//根据后端返回的打印配置信息设置左边距

      //初始化打印函数
      let LODOP = getLodop();
      // 初始化打印
      LODOP.PRINT_INIT("lodop");
      // 设置纸张大小
      LODOP.SET_PRINT_PAGESIZE(this.printForm.direction == "1" ? 2 : 1, PageWidth, PageHeight); 
      //由于不好控制分页的时候，切纸的位置，于是换了一种方式，代码控制每一页的内容的地方使用LODOP.NewPageA();实现手动分页，这种方式可以保证切纸位置不会跑偏。
      this.printList.forEach((item: any) => {
        LODOP.ADD_PRINT_HTM(top, left, "99%", "99%", this.$refs[item.code].innerHTML);
        //分页
        LODOP.NewPageA();
      });
      //缩放比例 整页缩放打印
      LODOP.SET_PRINT_MODE("PRINT_PAGE_PERCENT", "Auto-Width");
      //字体大小设置
      //LODOP.SET_PRINT_STYLEA("FontSize", 12);
      //LODOP.SET_PRINT_MODE("RESELECT_PRINTER",true); //允许重选打印机
      LODOP.SET_PRINT_MODE("RESELECT_ORIENT", true); //允许重选纸张方向
      LODOP.SET_PRINT_MODE("RESELECT_PAGESIZE", true); //允许重选纸张 
      LODOP.SET_PRINT_MODE("RESELECT_COPIES", true); //允许重选份数
      LODOP.SET_PRINT_MODE("NOCLEAR_AFTER_PRINT", true); //设置打印完毕不清理打印信息
      LODOP.SET_PRINTER_INDEXA(printData); //设置某个打印机
      //LODOP.PRINT(); //打印
      //LODOP.SET_PRINTER_INDEXA("Brother Color Type3 Class Driver"); //设置另一个打印机
      //LODOP.SET_PRINTER_INDEXA("Doro PDF Writer"); //设置某个pdf虚拟打印机
      //打印设计
      LODOP.PREVIEW();
      //设置设置完打印后 是否关闭预览窗口;
      LODOP.SET_PRINT_MODE("AUTO_CLOSE_PREWINDOW", 1);
      //LODOP.PRINT_DESIGN();
        }, 500);
      
    },

html部分，打印内容

  <!-- 打印内容 -->
 // ref需要循环，方便代码手动分页的时候找到相关的内容 设置字号大小可以通过这种方式:style="{ fontSize: titleSize + 'px' }"
  <div v-for="item in printList" :key="item.code" :ref="item.code" class="printContent">
    <div style="margin-top: -10px">
      <div style="border: 0px solid #666666; border-bottom: 0px solid #666666; width: 840px; height: 941px">
        <div :style="{ fontSize: titleSize + 'px' }" style="border-bottom: 2px solid #666666; width: 838px; height: 110px; line-height: 110px; font-weight: bolder; text-align: center" id="title-content">{{ printForm.name }}</div>
        <div style="width: 838px; height: 378px; display: flex; border-bottom: 2px solid #666666" :style="{ fontSize: printForm.nameSize + 'px' }">
          <div>
            <div v-for="(val, key) in getContent(item, 'left')" :key="key" style="width: 510px; height: 63px; display: flex; line-height: 63px" :style="{ fontSize: fontSize + 'px' }">
              <div style="border-right: 2px solid #666666; border-bottom: 2px solid #666666; width: 190px; font-weight: bolder; text-align: center">{{ key }}</div>
              <div style="border-right: 2px solid #666666; border-bottom: 2px solid #666666; width: 300px">{{ val }}</div>
            </div>
          </div>
          <div style="padding-left: 23px; padding-top: 54px; width: 326px; border-right: 2px solid #666666">
            <qrcode-vue :value="item.code" :size="200" level="H" render-as="svg" />
            <div style="margin-top: 20px" :style="{ fontSize: fontSize + 'px' }">{{ item.code }}</div>
          </div>
        </div>
        <div v-for="(val, key) in getContent(item, 'foot')" :key="key" style="border-bottom: 2px solid #666666; width: 838px; height: 63px; display: flex; line-height: 63px" :style="{ fontSize: fontSize + 'px' }">
          <div style="border-right: 2px solid #666666; width: 190px; font-weight: bolder; text-align: center">{{ key }}</div>
          <div style="width: 646px; border-right: 2px solid #666666">{{ val }}</div>
        </div>
      </div>
      <h5 style="width: 840px; text-align: center; border-bottom: 1px; page-break-before：always" :style="{ fontSize: fontSize + 'px' }">打印时间:{{ time }}</h5>
    </div>