vue项目中如何利用lodop控件实现多页打印

针对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>

vue项目中如何利用lodop控件实现多页打印相关推荐

jQuery中toggle()函数的应用总结（包含今天项目中碰到的前端控件）
本人是一名后台开发人员,然而公司项目没有做到前后端分离,前端仅仅是写静态页面,js还得后台开发人员写.对于前端的东西呢常见东西的是没有问题,但是有些东西用的少可能容易忘记.这不今天接手维护另一个同事的 ...
Windows10下VB6.0开发——利用PictureBox控件实现数据点实时绘图
前言:VB中可以利用PictureBox控件实现数据点实时绘图功能. 1. 控件PictureBox 下面是PictureBox的图标: 将该控件拖到目标位置后调整它的形状大小,修改它的背景色 ...
ASP中利用OWC控件实现图表功能详解[zz]
ASP中利用OWC控件实现图表功能详解在ASP中利用OWC(Office Web Components)控件可轻松实现各种图表功能,如饼图,簇状柱型图,折线图等. 在下面的代码中我详细的给出了饼图, ...
ASP中利用OWC控件实现图表功能详解
在ASP中利用OWC(Office Web Components)控件可轻松实现各种图表功能,如饼图,簇状柱型图,折线图等. 在下面的代码中我详细的给出了饼图,簇状柱型图,折线图的使用方法.OWC的更 ...
利用tab_control控件在对话框中加入属性页的方法详细介绍
在对话框中加入属性页方案一在对话框上放置一个Tab Control的控件,再在对话框上放置所需的控件(本例放置了2个按钮,试图在每个标签中显示一个).然后利用Class Wizard来为Tab C ...
Vue项目中利用pdf.js实现pdf内容滑选文字展示与搜索功能
Vue项目中利用pdf.js实现pdf内容滑选文字展示与搜索功能需求:在pdf中鼠标滑动选中一段文字,将选中文字展示到input框中(pdf在iframe中) 完成效果: 关于pdf的引用:我是直接 ...
VB.net小技巧——VB中利用TreeView控件和Box控件做知识备忘
提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档 VB.net小技巧--VB中利用TreeView控件和Box控件做知识备忘这里不涉及代码的展示,主要是为了阐述一种做笔记的思想. 为 ...
excel日历弄到html,如何在Excel中利用日历控件来快速输入日期
给大家分享了一个利用日历控件在Excel单元格中输入日期的小窍门.大家知道,物流和会计行业的报表,经常需要手工输入一些日期,例如发货日期,在途时间.到达配送中心日期.签收日期等,如果手工输入,难免出错 ...
Qt项目UI文件中新添加的控件在代码中不识别的问题
ui->XXXX 在UI界面中新添加了控件,但是在代码中怎么也不出现,或者划红线我看不少人说备份删除文件再添加,或者关闭QT再打开... 其实只要右键项目清除构建,然后重新构建就可以了, 这有 ...

vue项目中如何利用lodop控件实现多页打印

下载安装

代码中使用

vue项目中如何利用lodop控件实现多页打印相关推荐

最新文章

热门文章