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+css实现的简单易用兼容好的分页
Dec 30 Javascript
键盘上一张下一张兼容IE/google/firefox等浏览器
Jan 28 Javascript
JavaScript设计模式之外观模式介绍
Dec 28 Javascript
JavaScript使用cookie实现记住账号密码功能
Apr 27 Javascript
值得分享的轻量级Bootstrap Table表格插件
May 30 Javascript
Vue.js -- 过滤器使用总结
Feb 18 Javascript
面试常见的js算法题
Mar 23 Javascript
Angular+Node生成随机数的方法
Jun 16 Javascript
jQuery实现手势解锁密码特效
Aug 14 jQuery
详解关于React-Router4.0跳转不置顶解决方案
May 10 Javascript
npx create-react-app xxx创建项目报错的解决办法
Feb 17 Javascript
vue实现验证用户名是否可用
Jan 20 Vue.js
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中$_REQUEST、$_POST、$_GET的区别和联系小结
2011/11/23 PHP
PHP定时执行计划任务的多种方法小结
2011/12/19 PHP
PHP chop()函数讲解
2019/02/11 PHP
脚本吧 - 幻宇工作室用到js,超强推荐base.js
2006/12/23 Javascript
addEventListener()第三个参数useCapture (Boolean)详细解析
2013/11/07 Javascript
基于jquery的手风琴图片展示效果实现方法
2014/12/16 Javascript
RequireJS使用注意细节
2016/05/15 Javascript
jquery 无限极下拉菜单的简单实例(精简浓缩版)
2016/05/31 Javascript
Nodejs中 npm常用命令详解
2016/07/04 NodeJs
基于JQuery及AJAX实现名人名言随机生成器
2017/02/10 Javascript
CentOS 安装NodeJS V8.0.0的方法
2017/06/15 NodeJs
Vue-Router的使用方法
2018/09/05 Javascript
js计算两个日期间的天数月的实例代码
2018/09/20 Javascript
微信小程序Page中data数据操作和函数调用方法
2019/05/08 Javascript
Vue toFixed保留两位小数的3种方式
2020/10/23 Javascript
vue 授权获取微信openId操作
2020/11/13 Javascript
python轻松实现代码编码格式转换
2015/03/26 Python
Python实现处理管道的方法
2015/06/04 Python
Python中定时任务框架APScheduler的快速入门指南
2017/07/06 Python
理解Python中的绝对路径和相对路径
2017/08/30 Python
一个月入门Python爬虫学习,轻松爬取大规模数据
2018/01/03 Python
Python中的单行、多行、中文注释方法
2018/07/19 Python
python3判断url链接是否为404的方法
2018/08/10 Python
Python2 与Python3的版本区别实例分析
2020/03/30 Python
解决导入django_filters不成功问题No module named 'django_filter'
2020/07/15 Python
css实例教程 一款纯css3实现的超炫动画背画特效
2014/11/05 HTML / CSS
一站式跨境收款解决方案:Payoneer(派安盈)
2018/09/06 全球购物
毕业自我评价
2014/02/05 职场文书
志愿者服务感言
2014/02/27 职场文书
公司请假条格式
2014/04/11 职场文书
《故都的秋》教学反思
2014/04/15 职场文书
个人简历自荐信
2014/06/26 职场文书
学生吸烟检讨书
2014/09/14 职场文书
工作态度检讨书范文
2015/05/06 职场文书
总结会主持词
2015/07/02 职场文书
基于Redission的分布式锁实战
2022/08/14 Redis