lodop转到其他html页面,vue项目中使用Lodop实现批量打印html页面和pdf文件

1.Lodop是什么？

Lodop(标音:劳道谱,俗称:露肚皮)是专业WEB控件,用它既可裁剪输出页面内容，又可用程序代码直接实现复杂打印。控件功能强大,却简单易用,所有调用如同JavaScript扩展语句,主要接口函数如下：

●PRINT_INIT(strPrintTaskName)打印初始化

●SET_PRINT_PAGESIZE(intOrient,intPageWidth,intPageHeight,strPageName)设定纸张大小

参数说明：

intOrient：打印方向及纸张类型

1---纵向打印，固定纸张；

2---横向打印，固定纸张；

3---纵向打印，宽度固定，高度按打印内容的高度自适应(见样例18)；

0---方向不定，由操作者自行选择或按打印机缺省设置。

intPageWidth：

纸张宽，单位为0.1mm 譬如该参数值为45，则表示4.5mm,计量精度是0.1mm。

intPageHeight：

固定纸张时该参数是纸张高；高度自适应时该参数是纸张底边的空白高，计量单位与纸张宽一样。

strPageName：

纸张类型名

●ADD_PRINT_HTM(intTop,intLeft,intWidth,intHeight,strHtml)增加超文本项

●ADD_PRINT_TEXT(intTop,intLeft,intWidth,intHeight,strContent)增加纯文本项

●ADD_PRINT_TABLE(intTop,intLeft,intWidth,intHeight,strHtml)增加表格项

●ADD_PRINT_SHAPE(intShapeType,intTop,intLeft,intWidth,intHeight,intLineStyle,intLineWidth,intColor)画图形

●SET_PRINT_STYLE(strStyleName, varStyleValue)设置对象风格

●PREVIEW打印预览

●PRINT直接打印

●PRINT_SETUP打印维护

●PRINT_DESIGN打印设计

最基本的打印过程至少有初始化语句、添内容语句和打印语句三部分组成，例如：

LODOP.PRINT_INIT("打印任务名"); //首先一个初始化语句

LODOP.ADD_PRINT_TEXT(0,0,100,20,"文本内容一");//然后多个ADD语句及SET语句

LODOP.PRINT(); //最后一个打印(或预览、维护、设计)语句

2.在vue项目中如何实现批量打印功能？

1.在index页面中引入js文件

2.在批量打印时我们得先区分是html标签打印还是pdf打印

// 批量打印lazada国内面单(html标签)

printingClick() {

const tableInfo = this.multipleSelection.map(item => window.decodeURIComponent(escape(window.atob(item.shippingPdfUrl))))

console.log(tableInfo)

LODOP = getLodop()

LODOP.PRINT_INIT('打印')

LODOP.SET_PRINT_PAGESIZE(3, 1000, 1500, '')// 3代表纵向打印，宽度固定，高度按打印内容的高度自适应,纸张10*15

for (let i = 0; i < tableInfo.length; i++) {

this.creatOneRage(tableInfo[i])

}

LODOP.SET_PREVIEW_WINDOW(0, 0, 0, 0, 0, '')

if (LODOP.SET_PRINTER_INDEXA(0)) { LODOP.PRINT() } // 这里实现的是选择打印机，数字代表打印机的型号，如果不需要预览，将LODOP.PREVIEW()改为LODOP.PRINT()

},

creatOneRage(table) {

LODOP.NewPage()

LODOP.ADD_PRINT_IMAGE(12, 12, '95%', '95%', table)

LODOP.SET_PRINT_STYLEA(0, 'Stretch', 2)

},

SET_PRINTER_INDEX(oIndexOrName);按序号或名称指定打印机，选定后禁止手工重选；

SET_PRINTER_INDEXA(IndexorName);按序号或名称指定打印机，选定后允许手工重选；

// 批量打印pdf文件

// 批量打印pdf文件

printingShopee() {

const strURL = ['QzpcVXNlcnNcYWRtaW5cRG93bmxvYWRzXDE5MDkxOTA1MzU0S0QzRy5wZGY=', 'QzpcVXNlcnNcYWRtaW5cRG93bmxvYWRzXDE5MTAyMzIwMjUxQVdUSCAoMSkucGRm']// 线上地址有跨越问题，本地路径模拟打印,路径不能直接识别，所以先加密了

const strURLorContent = strURL.map(item => window.atob(item))

LODOP = getLodop()

LODOP.PRINT_INIT('打印')

LODOP.SET_PRINT_PAGESIZE(3, 1000, 1500, '')

for (let j = 0; j < strURLorContent.length; j++) {

this.creatPdfRage(strURLorContent[j])

}

LODOP.SET_PREVIEW_WINDOW(0, 0, 0, 0, 0, '')

if (LODOP.SET_PRINTER_INDEXA(1)) { LODOP.PREVIEW() } //上面的例子选择的打印机序号为0，这里为1，上面的直接打印，这里的是预览，可以根据需求选择

LODOP.PREVIEW()

},

creatPdfRage(pdf) {

LODOP.NewPage()

LODOP.ADD_PRINT_PDF(0, 0, '100%', '100%', pdf)

},

3.部分面单信息返回的html标签我们需要进行过滤

demo:

一个很长的html标签字符串，我们需要过滤掉`

`标签后面的所有内容：

var str = '

'

console.log(str)

var arr = str.split('

')

console.log(arr[0])

注：打印机的安装，先去打印机官网下对应的驱动，然后在控制面板中添加打印机

vue项目中使用ts(typescript)入门教程

最近项目需要将原vue项目结合ts的使用进行改造,这个后面应该是中大型项目的发展趋势,看到一篇不错的入门教程,结合它并进行了一点拓展记录之.本文从安装到vue组件编写进行了说明,适合入门. 1.引入T ...

vue项目中导出PDF的两种方式

参考大家导出的方式,基本上是如下两种: 1.使用 html2Canvas + jsPDF 导出PDF, 这种方式什么都好,就是下载的pdf太模糊了.对要求好的pdf这种方式真是不行啊! 2.调用浏览器 ...

在vue项目中设置BASE&lowbar;URL

在vue项目中设置BASE_URL 1.在config文件夹中新建global.js文件 const BASE_URL = 'http://192.168.1.62:8080/rest/' expor ...

vue项目中使用bpmn-流程图xml文件中节点属性转json结构

内容概述 本系列“vue项目中使用bpmn-xxxx”分为七篇,均为自己使用过程中用到的实例,手工原创,目前陆续更新中.主要包括vue项目中bpmn使用实例.应用技巧.基本知识点总结和需要注意事项,具 ...

vue 项目中实用的小技巧

# 在Vue 项目中引入Bootstrap 有时在vue项目中会根据需求引入Bootstrap,而Bootstrap又是依赖于jQuery的,在使用npm按照时,可能会出现一系列的错误 1.安装jQu ...

如何在VUE项目中添加ESLint

如何在VUE项目中添加ESLint 1. 首先在项目的根目录下 新建 .eslintrc.js文件,其配置规则可以如下:(自己小整理了一份),所有的代码如下: // https://eslint.or ...

在vue项目中&comma; mock数据

1. 在根目录下创建 test 目录, 用来存放模拟的 json 数据, 在 test 目录下创建模拟的数据 data.json 文件 2.在build目录下的 dev-server.js的文件作如下 ...

浅谈 Axios 在 Vue 项目中的使用

介绍 Axios 是一个基于 promise 的 HTTP 库,可以用在浏览器和 node.js 中. 特性 它主要有如下特性: 浏览器端发起XMLHttpRequests请求 Node端发起http ...

去除vue项目中的&num;及其ie9兼容性

一.如何去除vue项目中访问地址的# vue2中在路由配置中添加mode(vue-cli创建的项目在src/router/index.js) export default new Router({ m ...

随机推荐

Gitblit中采用Ticket模式进行协作开发

Git目前的代码分支管理模型中,比较主要的有Git-Flow.Github Pull Request.大家日常或多或少都在用着. 在不想安装Gitlab这种重量级的环境的情况下,如果是利用git一步步 ...

用自己的话描述wcf中的传输安全与消息安全的区别(三)

消息交换安全模式 PS:很多书上把transfer security和transport security都翻译成“传输安全”,这样易混淆.我这里把transfer说成消息交换安全. 安全的含义分为验 ...

Apache日志配置详解&lpar;rotatelogs LogFormat&rpar;

logs/error_logCustomLog logs/access_log common--默认为以上部分 修改为如下: ErrorLog "|/usr/sbin/rotatelogs ...

使用react native for android生成app

参考文章 http://reactnative.cn/docs/getting-started.html http://www.lcode.org/react-native/ https://gith ...

CSDN首页&gt&semi; 移动开发 直接拿来用！最火的Android开源项目(完结篇)

此前,CSDN移动频道推出的GitHub平台上“最受欢迎的开源项目”系列文章引发了许多读者的热议,在“直接拿来用!最火的Android开源项目”系列文章(一).(二)中,我们也相继盘点了40个GitH ...

关于使用阿里OSS服务搭建图床和使用PicGO上传图片到图床

最近喜欢上了使用markdown来写博客,可是markdown的图片却是本地的,如果我要发博客,那么又要重复截图了.于是干脆弄了个图床,本地截图的时候上传到图床,markdown中的代码结果也是图床里 ...

java获取真实的IP地址工具类

在实际项目中,有调用微信支付完成支付功能,在微信支付的请求参数中需要传递一个本机的ip地址,java代码运行环境目前为windows10以及centos7. 以下为获取ip地址工具类: package ...

Kali-linux使用Metasploit基础

Metasploit是一款开源的安全漏洞检测工具.它可以帮助用户识别安全问题,验证漏洞的缓解措施,并对某些软件进行安全性评估,提供真正的安全风险情报.当用户第一次接触Metasploit渗透测试框架软 ...

linux 查找并kill进程

以php以关键字查找进程 $ ps aux | grep php root             32957   0.0  0.1  2470904   8908 s002  S+    4:53下 ...

mysql查询今日、本周、本月记录

SELECT * FROM table_name WHERE to_days(createtime) = to_days(now()); SELECT * FROM table_name WHERE ...