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渐变发光导航菜单的实例代码
Mar 27 Javascript
jquery ajax跨域解决方法(json方式)
Feb 04 Javascript
js时钟翻牌效果实现代码分享
Jul 31 Javascript
Javascript的表单验证长度
Mar 16 Javascript
jQuery如何解决IE输入框不能输入的问题
Oct 08 Javascript
最常见和最有用的字符串相关的方法详解
Feb 06 Javascript
原生JS实现垂直手风琴效果
Feb 19 Javascript
Bootstrap实现下拉菜单多级联动
Nov 23 Javascript
vue单页面打包文件大?首次加载慢?nginx带你飞,从7.5M到1.3M蜕变过程(推荐)
Jan 16 Javascript
JS中用EL表达式获取上下文参数值的方法
Mar 28 Javascript
javascript数组去重方法总结(推荐)
Mar 20 Javascript
简单了解three.js 着色器材质
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引用地址改变变量值的问题
2012/03/23 PHP
PHP中func_get_args(),func_get_arg(),func_num_args()的区别
2013/09/30 PHP
php实现通用的从数据库表读取数据到数组的函数实例
2015/03/21 PHP
php将HTML表格每行每列转为数组实现采集表格数据的方法
2015/04/03 PHP
php递归调用删除数组空值元素的方法
2015/04/28 PHP
thinkPHP线上自动加载异常与修复方法实例分析
2016/12/01 PHP
PHP中PCRE正则解析代码详解
2019/04/26 PHP
在Windows上安装Node.js模块的方法
2011/09/25 Javascript
js自动生成的元素与页面原有元素发生堆叠的解决方法
2014/09/04 Javascript
浅谈javascript中基本包装类型
2015/06/03 Javascript
JQuery用户名校验的具体实现
2016/03/18 Javascript
JCrop+ajaxUpload 图像切割上传的实例代码
2016/07/20 Javascript
jQuery通过ajax方法获取json数据不执行success的原因及解决方法
2016/10/15 Javascript
NodeJs form-data格式传输文件的方法
2017/12/13 NodeJs
使用async await 封装 axios的方法
2018/07/09 Javascript
js canvas实现二维码和图片合成的海报
2020/11/19 Javascript
element-ui 时间选择器限制范围的实现(随动)
2019/01/09 Javascript
前端面试知识点目录一览
2019/04/15 Javascript
手把手教你 CKEDITOR 4 扩展插件制作
2019/06/18 Javascript
javascript递归函数定义和用法示例分析
2020/07/22 Javascript
[01:10]DOTA2次级职业联赛 - EP战队宣传片
2014/12/01 DOTA
Python3 入门教程 简单但比较不错
2009/11/29 Python
python抓取搜狗微信公众号文章
2019/04/01 Python
Python安装与卸载流程详细步骤(图解)
2020/02/20 Python
python自动点赞功能的实现思路
2020/02/26 Python
html5指南-5.使用web storage存储键值对的数据
2013/01/07 HTML / CSS
Sephora丝芙兰菲律宾官方网站:购买化妆品和护肤品
2017/04/05 全球购物
德国的各种媒体在线商店:Thalia.de(书籍、电子书、玩具等)
2020/10/08 全球购物
小学中秋节活动方案
2014/02/06 职场文书
高三上学期学习自我评价
2014/04/23 职场文书
乔布斯斯坦福大学演讲稿
2014/05/23 职场文书
2014年个人业务工作总结
2014/11/17 职场文书
2014年市场部工作总结
2014/11/25 职场文书
2016年最美孝心少年事迹材料
2016/02/26 职场文书
详解Javascript实践中的命令模式
2021/05/05 Javascript
nginx七层负载均衡配置详解
2022/07/15 Servers