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非Alert实现网页右下角“未读信息”效果弹窗
Sep 26 Javascript
详解AngularJS 模态对话框
Apr 07 Javascript
JavaScript基础知识点归纳(推荐)
Jul 09 Javascript
详解Angular.js指令中scope类型的几种特殊情况
Feb 21 Javascript
vue router2.0二级路由的简单使用
Jul 05 Javascript
ionic 3.0+ 项目搭建运行环境的教程
Aug 09 Javascript
利用VS Code开发你的第一个AngularJS 2应用程序
Dec 15 Javascript
react中fetch之cors跨域请求的实现方法
Mar 14 Javascript
JS编写兼容IE6,7,8浏览器无缝自动轮播
Oct 12 Javascript
node实现分片下载的示例代码
Oct 17 Javascript
微信小程序实现比较功能的方法汇总(五种方法)
Mar 07 Javascript
Vite + React从零开始搭建一个开源组件库
Jun 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下关于Cannot use a scalar value as an array的解决办法
2010/08/08 PHP
PHP面向对象学习笔记之一 基础概念
2012/10/06 PHP
PHP网页游戏学习之Xnova(ogame)源码解读(六)
2014/06/23 PHP
phpnow php探针环境检测代码
2014/11/04 PHP
PHP实现清除MySQL死连接的方法
2016/07/23 PHP
BOOM vs RR BO5 第二场 2.14
2021/03/10 DOTA
禁止刷新,回退的JS
2006/11/25 Javascript
关于IE中getElementsByClassName不能用的问题解决方法
2013/08/26 Javascript
详解JS函数重载
2014/12/04 Javascript
JS实现图片产生波纹一样flash效果的方法
2015/02/27 Javascript
jquery ztree异步搜索(搜叶子)实践
2016/02/25 Javascript
JS简单生成两个数字之间随机数的方法
2016/08/03 Javascript
利用Javascript实现BMI计算器
2016/08/16 Javascript
JavaScript模仿Pinterest实现图片预加载功能
2016/10/25 Javascript
BootStrap实现带有增删改查功能的表格(DEMO详解)
2016/10/26 Javascript
nodejs+express搭建多人聊天室步骤
2018/02/12 NodeJs
vue v-model实现自定义样式多选与单选功能
2018/07/05 Javascript
解决vue-cli项目打包出现空白页和路径错误的问题
2018/09/04 Javascript
Vue 利用指令实现禁止反复发送请求的两种方法
2019/09/15 Javascript
详解vue-flickity的fullScreen功能实现
2020/04/07 Javascript
python批量添加zabbix Screens的两个脚本分享
2017/01/16 Python
python操作excel的方法(xlsxwriter包的使用)
2018/06/11 Python
Python实现的服务器示例小结【单进程、多进程、多线程、非阻塞式】
2019/05/23 Python
python3使用GUI统计代码量
2019/09/18 Python
Python3自定义http/https请求拦截mitmproxy脚本实例
2020/05/11 Python
使用Dajngo 通过代码添加xadmin用户和权限(组)
2020/07/03 Python
Windows下Sqlmap环境安装教程详解
2020/08/04 Python
美国马匹用品和骑马配件购物网站:Horse.com
2018/01/08 全球购物
澳大利亚领先的优质葡萄酒拍卖会:Langton’s Fine Wines
2019/03/24 全球购物
师范大学毕业自我鉴定
2013/11/21 职场文书
主题婚礼策划方案
2014/02/10 职场文书
体育专业大学生职业生涯规划范文:打造自己的运动帝国
2014/09/12 职场文书
小学生2014国庆节演讲稿:祖国在我心中
2014/09/21 职场文书
2014年店长工作总结
2014/11/17 职场文书
医院岗前培训心得体会
2016/01/08 职场文书
Python Pygame实战在打砖块游戏的实现
2022/03/17 Python