Vue中使用Lodop插件实现打印功能的简单方法


Posted in Javascript onDecember 19, 2019

介绍

需要进行打印功能,Lodop就是实现需求的插件.就是引入对应的js-sdk,使用js调用对应的打印方法,然后就会调出客户端软件(需要用户安装),然后就可以在软件里面打印内容了.

使用方法

最小实现

实现打印必须要执行的3个最基本的方法

LODOP.PRINT_INIT("打印任务名");    //首先一个初始化语句 
LODOP.ADD_PRINT_TEXT(0,0,100,20,"文本内容一");//然后多个ADD语句及SET语句 
LODOP.PRINT();        //最后一个打印(或预览、维护、设计)语句

所有方法

  • PRINT_INIT(strPrintTaskName)打印初始化
  • SET_PRINT_PAGESIZE(intOrient,intPageWidth,intPageHeight,strPageName)设定纸张大小 (1横向2竖向,宽度,高度,页面大小名称宽高都设置为0的时候才可以设置"A5","A4")
  • ADD_PRINT_HTM(intTop,intLeft,intWidth,intHeight,strHtml)增加超文本项
  • ADD_PRINT_TEXT(intTop,intLeft,intWidth,intHeight,strContent)增加纯文本项
  • ADD_PRINT_TABLE(intTop,intLeft,intWidth,intHeight,strHtml)增加表格项(strHtml为html模板字符串)
  • ADD_PRINT_SHAPE(intShapeType,intTop,intLeft,intWidth,intHeight,intLineStyle,intLineWidth,intColor)画图形
  • SET_PRINT_STYLE(strStyleName, varStyleValue)设置对象风格
  • PREVIEW打印预览
  • PRINT直接打印
  • PRINT_SETUP打印维护
  • PRINT_DESIGN打印设计

在Vue中使用Lodop

下载lodop,把js文件放到utils里面,把里面两个方法修改为export function(暴露出去,让其他js文件import来用)

// 改造LodopFuncs.js
//====判断是否需要安装CLodop云打印服务器:====
export function needCLodop(){ ...... }

//====获取LODOP对象的主过程:====
export function getLodop(oOBJECT,oEMBED){ ...... }

写好打印方法的逻辑

// doPrint.js
import { getLodop } from '@/utils/LodopFuncs'

/**
 * 打印方法doPrint
 * @param {*} printConfig 任务名,上边距,左边距,宽度,高度,打印html内容,是否横屏,分页
 */
export default function({ name, top, left, width, height, htmlContent, isHorizontal }) {
 const LODOP = getLodop()
 LODOP.PRINT_INIT('订货单') // 打印初始化(打印任务名)
 LODOP.SET_PRINT_PAGESIZE(1, 0, 0, 'A4')
 LODOP.SET_PRINT_STYLE('FontSize', 18) // 样式
 LODOP.SET_PRINT_STYLE('Bold', 1)
 // LODOP.ADD_PRINT_TEXT(50, 231, 260, 39, '打印页面部分内容') // 添加纯文本内容
 // top,left,width,height,htmlContent
 LODOP.ADD_PRINT_HTM(88, 75, 650, 978, htmlContent) // 添加HTML模板内容
 // LODOP.PRINT(); // 直接打印
 LODOP.PREVIEW() // 预览
}

在use.js里面把打印方法挂载到全局方法

// use.js
import doPrint from '@/utils/doPrint'

Vue.prototype.$doPrint = doPrint
在vue页面中使用
 this.$doPrint(data)
 /**
 * 注意: 这里因为用到了这个插件,所以有可能需要让这个插件内部方法在加载完成后才能正常使用
 * 也就是说,它还有以一些准备工作,例如判断方法,连接通讯等等
 * 如果直接用会报错的话,或者崩溃等其他问题,所以就可以在这里延迟再执行打印操作
 * setTimeout(()=> {
 * this.$doPrint(data)
 * })
 * */

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,谢谢大家对三水点靠木的支持。

Javascript 相关文章推荐
情人节之礼 js项链效果
Feb 13 Javascript
Jquery解析Json格式数据过程代码
Oct 17 Javascript
js实现精美的图片跟随鼠标效果实例
May 16 Javascript
javascript中的Function.prototye.bind
Jun 25 Javascript
前端js弹出框组件使用方法
Aug 24 Javascript
Vue.js系列之vue-router(上)(3)
Jan 03 Javascript
Vue中的Props(不可变状态)
Sep 29 Javascript
layer.confirm点击第一个按钮关闭弹出框的方法
Sep 09 Javascript
es6中reduce的基本使用方法
Sep 10 Javascript
vue 全局环境切换问题
Oct 27 Javascript
JavaScript实现简单随机点名器
Nov 21 Javascript
javascript实现左右缓动动画函数
Nov 25 Javascript
Echarts实现单条折线可拖拽效果
Dec 19 #Javascript
Webpack设置环境变量的一些误区详解
Dec 19 #Javascript
Echarts实现多条折线可拖拽效果
Dec 19 #Javascript
js判断一个对象是数组(函数)的方法实例
Dec 19 #Javascript
利用JS如何获取form表单数据
Dec 19 #Javascript
在Vue项目中使用Typescript的实现
Dec 19 #Javascript
JS数据类型STRING使用实例解析
Dec 18 #Javascript
You might like
php中支持多种编码的中文字符串截取函数!
2007/03/20 PHP
解析数组非数字键名引号的必要性
2013/08/09 PHP
两个php日期控制类实例
2014/12/09 PHP
功能强大的PHP图片处理类(水印、透明度、旋转)
2015/10/21 PHP
超清晰的document对象详解
2007/02/27 Javascript
Extjs中TabPane如何嵌套在其他网页中实现思路及代码
2013/01/27 Javascript
如何在一个页面显示多个百度地图
2013/04/07 Javascript
使用GruntJS构建Web程序之合并压缩篇
2014/06/06 Javascript
JavaScript实现向右伸出的多级网页菜单效果
2015/08/25 Javascript
关于JavaScript限制字数的输入框的那些事
2016/08/14 Javascript
JavaScript微信定位功能实现方法
2016/11/29 Javascript
利用node.js搭建简单web服务器的方法教程
2017/02/20 Javascript
JavaScript实现按键精灵的原理分析
2017/02/21 Javascript
使用jquery datatable和bootsrap创建表格实例代码
2017/03/17 Javascript
vue-cli+webpack在生成的项目中使用bootstrap实例代码
2017/05/26 Javascript
jquery仿京东商品放大浏览页面
2017/06/06 jQuery
vue脚手架及vue-router基本使用
2018/04/09 Javascript
JS同步、异步、延迟加载的方法
2018/05/05 Javascript
React 使用browserHistory项目访问404问题解决
2018/06/01 Javascript
vue项目中mock.js的使用及基本用法
2019/05/22 Javascript
微信小程序canvas截取任意形状的实现代码
2020/01/13 Javascript
JavaScript canvas实现跟随鼠标事件
2020/02/10 Javascript
vue render函数动态加载img的src路径操作
2020/10/26 Javascript
Javascript文本框脚本实现方法解析
2020/10/30 Javascript
Sanic框架异常处理与中间件操作实例分析
2018/07/16 Python
PyQt5 QListWidget选择多项并返回的实例
2019/06/17 Python
python双向链表原理与实现方法详解
2019/12/03 Python
Python SMTP发送电子邮件的示例
2020/09/23 Python
印度民族服装购物网站:BIBA
2019/08/05 全球购物
总经理助理的职责
2014/03/14 职场文书
幼儿园法制宣传日活动总结
2014/11/01 职场文书
2015年员工试用期工作总结
2014/12/12 职场文书
青岛海底世界导游词
2015/02/11 职场文书
python实现自动清理文件夹旧文件
2021/05/10 Python
基于PyQT5制作一个桌面摸鱼工具
2022/02/15 Python
【DOTA2】当街暴打?PSG LGD vs VG - DPC 2022 WINTER TOUR CN
2022/04/02 DOTA