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 相关文章推荐
jquery修改网页背景颜色通过css方法实现
Jun 06 Javascript
JS判断是否360安全浏览器极速内核的方法
Jan 29 Javascript
jQuery实现页面滚动时动态加载内容的方法
Mar 20 Javascript
javascript实现2016新年版日历
Jan 25 Javascript
使用jQuery实现WordPress中的Ctrl+Enter和@评论回复
May 21 Javascript
JS中对数组元素进行增删改移的方法总结
Dec 15 Javascript
jquery,js简单实现类似Angular.js双向绑定
Jan 13 Javascript
vue的mixins属性详解
Mar 14 Javascript
jquery.onoff实现简单的开关按钮功能(推荐)
May 24 jQuery
Angular2中监听数据更新的方法
Aug 31 Javascript
H5+C3+JS实现五子棋游戏(AI篇)
May 28 Javascript
从0到1构建vueSSR项目之node以及vue-cli3的配置
Mar 07 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 无限级 SelectTree 类
2009/05/19 PHP
PHP实现多进程并行操作的详解(可做守护进程)
2013/06/18 PHP
php递归删除目录下的文件但保留的实例分享
2014/05/10 PHP
php通过session防url攻击方法
2014/12/10 PHP
PHP的Laravel框架结合MySQL与Redis数据库的使用部署
2016/03/21 PHP
php使用curl代理实现抓取数据的方法
2017/02/03 PHP
详谈PHP中public,private,protected,abstract等关键字的用法
2017/12/31 PHP
yii2 上传图片的示例代码
2018/11/02 PHP
JavaScript 小型打飞机游戏实现原理说明
2010/10/28 Javascript
基于javascript实现判断移动终端浏览器版本信息
2014/12/09 Javascript
js闭包实现按秒计数
2015/04/23 Javascript
jquery使用on绑定a标签无效 只能用live解决
2016/06/02 Javascript
js前端面试题及答案整理(一)
2016/08/26 Javascript
angular ng-repeat数组中的数组实例
2017/02/18 Javascript
基于jquery实现二级联动效果
2017/03/30 jQuery
jquery在vue脚手架中的使用方式示例
2017/08/29 jQuery
js使用xml数据载体实现城市省份二级联动效果
2017/11/08 Javascript
jQuery实现右侧抽屉式在线客服功能
2017/12/25 jQuery
在vue项目中引入vue-beauty操作方法
2019/02/11 Javascript
python编写暴力破解FTP密码小工具
2014/11/19 Python
Python实现带百分比的进度条
2016/06/28 Python
Python中的二维数组实例(list与numpy.array)
2018/04/13 Python
python将类似json的数据存储到MySQL中的实例
2019/07/12 Python
浅析python内置模块collections
2019/11/15 Python
Django web自定义通用权限控制实现方法
2020/11/24 Python
html5 touch事件实现页面上下滑动效果【附代码】
2016/03/10 HTML / CSS
教育学专业毕业生的自我评价
2013/11/21 职场文书
信息专业个人的自我评价
2013/12/27 职场文书
党员学习十八大感想
2014/01/17 职场文书
教育学习自我评价
2014/02/03 职场文书
物理教育专业求职信
2014/06/25 职场文书
高中运动会广播稿
2014/09/16 职场文书
2014年个人工作总结模板
2014/12/15 职场文书
圣诞晚会主持词开场白
2015/05/28 职场文书
React forwardRef的使用方法及注意点
2021/06/13 Javascript
python神经网络 使用Keras构建RNN训练
2022/05/04 Python