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 相关文章推荐
创建一个复制UBB软件信息的链接或按钮的js代码
Jan 06 Javascript
JavaScript中常用的运算符小结
Jan 18 Javascript
js中replace的用法总结
Dec 27 Javascript
通过JS来判断页面控件是否获取焦点
Jan 03 Javascript
jquery实现动画菜单的左右滚动、渐变及图形背景滚动等效果
Aug 25 Javascript
详解jQuery Mobile自定义标签
Jan 06 Javascript
JSON 的正确用法探讨:Pyhong、MongoDB、JavaScript与Ajax
May 15 Javascript
浅谈JavaScript的闭包函数
Dec 08 Javascript
基于MVC方式实现三级联动(JavaScript)
Jan 23 Javascript
jquery仿ps颜色拾取功能
Mar 08 Javascript
Angular.JS内置服务$http对数据库的增删改使用教程
May 07 Javascript
解决Vue的项目使用Element ui 走马灯无法实现的问题
Aug 03 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单例模式详细介绍
2015/07/01 PHP
php采集神器cURL使用方法详解
2016/02/19 PHP
PHP入门教程之自定义函数用法详解(创建,调用,变量,参数,返回值等)
2016/09/11 PHP
解决Laravel 使用insert插入数据,字段created_at为0000的问题
2019/10/11 PHP
2007/12/23更新创意无限,简单实用(javascript log)
2007/12/24 Javascript
一个可以兼容IE FF的加为首页与加入收藏实现代码
2009/11/02 Javascript
href下载文件根据id取url并下载
2014/05/28 Javascript
JavaScript中操作字符串小结
2015/05/04 Javascript
JavaScript面向对象之私有静态变量实例分析
2016/01/14 Javascript
js实现上传文件添加和删除文件选择框
2016/10/24 Javascript
bootstrap模态框实现拖拽效果
2016/12/14 Javascript
激动人心的 Angular HttpClient的源码解析
2017/07/10 Javascript
解决vue点击控制单个样式的问题
2018/09/05 Javascript
vue实现todolist功能、todolist组件拆分及todolist的删除功能
2019/04/11 Javascript
javascript设计模式 ? 策略模式原理与用法实例分析
2020/04/21 Javascript
[13:40]TI3青蛙君全程回顾 DOTA2我们为梦想再战
2013/09/13 DOTA
[00:35]DOTA2上海特级锦标赛 MVP.Phx战队宣传片
2016/03/04 DOTA
[57:18]DOTA2上海特级锦标赛主赛事日 - 1 败者组第一轮#3VP VS VG
2016/03/03 DOTA
python登录QQ邮箱发信的实现代码
2013/02/10 Python
python实现哈希表
2014/02/07 Python
Python实现的异步代理爬虫及代理池
2017/03/17 Python
django echarts饼图数据动态加载的实例
2019/08/12 Python
python基于json文件实现的gearman任务自动重启代码实例
2019/08/13 Python
pytorch神经网络之卷积层与全连接层参数的设置方法
2019/08/18 Python
解决Tensorboard 不显示计算图graph的问题
2020/02/15 Python
python 中的paramiko模块简介及安装过程
2020/02/29 Python
python中Ansible模块的Playbook的具体使用
2020/05/28 Python
用CSS3来实现社交分享按钮
2014/11/11 HTML / CSS
Feelunique中文官网:欧洲最大化妆品零售电商
2020/07/10 全球购物
《莫泊桑拜师》教学反思
2014/04/23 职场文书
工作说明书范文
2014/05/07 职场文书
自查自纠整改报告
2014/11/06 职场文书
个人工作年终总结
2015/03/09 职场文书
Python实战之实现康威生命游戏
2021/04/26 Python
Feign调用全局异常处理解决方案
2021/06/24 Java/Android
移除Selenium中window.navigator.webdriver值
2022/06/10 Python