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 ...

随机推荐

JUC学习笔记--Atomic原子类

J.U.C 框架学习顺序 http://blog.csdn.net/chen7253886/article/details/52769111 Atomic 原子操作类包 Atomic包 主要是在多线程 ...

【搬砖】【Python数据分析】Pycharm中plot绘图不能显示出来

最近在看这本书,而自己写代码一直用的是Pycharm,在练习的时候就碰到了plot()绘图不能显示出来的问题.网上翻了一下找到知乎上一篇回答,试了一下好像不行,而且 ...

MyBatis知多少(21)更新操作

上一章展示了如何使用MyBatis对表进行读取操作.本章将告诉你如何在一个表中使用MyBatis更新记录. 我们已经在MySQL下有EMPLOYEE表: CREATE TABLE EMPLOYEE ( ...

codeforces 375D:Tree and Queries

Description You have a rooted tree consisting of n vertices. Each vertex of the tree has some color. ...

JSChart

转自:http://www.cnblogs.com/riverback-moon/archive/2010/10/11/1848071.html JSChart是一个轻量级的在线图表生成工具,本身十 ...

javascript 基础API

Math.random() 取值范围[0,1)  大于等于0小于1,包括0,不包括1 Math.floor() 向下取整  Math.ceil() 向上取整 第一题:一组数的规则如下:1.1.2.3. ...

java异步任务处理

1.场景 最近做项目的时候遇到了一个小问题:从前台提交到服务端A,A调用服务端B处理超时,原因是前端一次请求往db插1万数据,插完之后会去清理缓存.发送消息. 服务端的有三个操作 a.插DB b.清理 ...

光学字符识别OCR

1.功能: 光学字符识别(OCR,Optical Character Recognition)是指对文本资料进行扫描,然后对图像文件进行分析处理,获取文字及版面信息的过程 2.典型应用: 名片扫描 3 ...

CMake 教程

CMake是一个跨平台的程序构建工具,比如起自己编写Makefile方便很多. 介绍:http://baike.baidu.com/view/1126160.htm 本文件不介绍CMake的基本语法, ...

JQuery学习&lpar;4-2-phpserver端1&rpar;

主要内容:介绍图片的上传过程,涉及PHP跟JQuery: 1. 读取配置文件,连接MySQL数据库. 配置文件主要实username和password. 3-5.php <?php /* * v ...

批量打印html文档,vue项目中使用Lodop实现批量打印html页面和pdf文件相关推荐

  1. 前端vue项目,把某个div盒子或当前页面生成pdf文件并下载。

    安装依赖 1. npm install --save html2canvas // 作用是html转图片 2. npm install jspdf --save // 再将图片转为pdf 目录标题 安 ...

  2. 如何在vue项目中使用lodop打印插件

    如何在vue项目中使用lodop打印插件 - 简书 先写了个webdemo <%--Created by IntelliJ IDEA.User: AdministratorDate: 2018/ ...

  3. 详解如何在vue项目中使用lodop打印插件,以及样式打印预览缺失的问题(底部)

    C-Lodop是一个免费云服务程序,可接受来自其它平台浏览器的JavaScrip语句实现远程打印. 目前是各家软件公司进行手机或微信远程打印的流行解决方案. 和其它"云打印"概念相 ...

  4. Vue 项目中使用Lodop进行打印

    配置文件与地址 Lodop 插件下载.打印设计都在这个网址上面进行,过程不做过多赘述,相信大家在看文章前应该对Lodop有了一定的了解 Vue中引入Lodop所需的配置文件 建议在项目中建一个自己的工 ...

  5. flowable 中文文档_取出word文档文字内容生成加了目录、标号和页码的PDF文件

    word文档内的一页: 将文本取出来,生成自定义格式的PDF文件: 从word取出文本时标题的标号和页码是取不出来的,要自己加.另外就是目录也要自己生成和添加: 代码和解释如下: from repor ...

  6. vue项目中使用lodop实现打印

    先说一下Lodop 是什么东西吧 官网有详细介绍我就不多说啦 官网:http://www.lodop.net/ Lodop(标音:劳道谱,俗称:露肚皮)是专业WEB控件,用它既可裁剪输出页面内容,又可 ...

  7. vue项目中的 env文件从何而来?什么是 process.env

    start 在 vue 项目中,时常会遇到到这么一行代码 process.env 这东西是什么,怎么用? 今天一篇文章带你了解 process.env 1.使用场景 先别急,先看 vue 项目中的用法 ...

  8. vue项目中更换tinymce版本踩坑

    项目需求: vue项目中实现多图片批量上传功能 问题: tinymce富文本编辑器的多图片批量上传插件 支持版本:5.0.4+ 项目中现有的富文本编辑器版本:4.9.4 为实现这一功能选择更换tiny ...

  9. Android 打印,搜索连接同一局域网下的所有网络打印机,打印照片,打印自定义文档。

    Android 搜索局域网下的所有网络打印机,打印照片,打印自定义文档. Android 连接局域网下的网络打印机打印图片,和自定义文档打印 github地址: https://github.com/ ...

  10. Python批量调整PPT文档样式

    Python批量调整PPT文档样式 在日常工作中,我们经常需要制作PPT文档来展示我们的工作成果或者进行汇报.但是,如果我们需要同时更改多张PPT的样式,手动修改会非常耗时且繁琐.此时,我们可以利用P ...

最新文章

  1. pytorch 常用问题解决
  2. Rigidbody.Is Kinematic和碰撞体
  3. 048_String对象
  4. 如何使用数据库SCHEDULER来执行清归档脚本
  5. Linux环境编程 用户层定时器使用一 timerfd的使用
  6. asp与php对比,ASP和PHP文件操作速度的对比
  7. python复数运算程序_python复数-python,复数
  8. 计算机课又叫什么课,计算机课学电脑的书叫什么?
  9. 深入.NET平台和C#编程
  10. 对报表.FRX文件的全面分析
  11. panabit之Web认证
  12. ribbonmq超时配置_使用RabbitMQ实现订单超时取消(延迟队列)
  13. 静态路由 动态路由 默认路由 默认网关
  14. 【参赛时间延长】InterSystems技术写作大赛:Python
  15. kafka-connect-jdbc 增加source报错:query may not be combined with whole-table copying settings
  16. 电脑计算机在哪里关闭杀毒模式,电脑一开杀毒软件就关闭的解决方法
  17. 数据结构C语言版第二版第六章原创总结
  18. unity中的一个简单易用的A*寻路算法类
  19. 工作流之Camunda开发记录(一)----常用API与流程
  20. 集成gin 、zap和lumberjack

热门文章

  1. 【githubboy】一份开源的小型金融知识图谱构建流程,可帮助你更好的学习与理解知识图谱的使用
  2. 使用SpringBoot+RabbitMQ框架集成例程
  3. 【智能优化算法】广义邻域搜索算法(综述)
  4. 如何找对另一半--第一章 品格与择偶关系
  5. lvds输入悬空_MAX 10高速LVDS I/O用户指南
  6. 微软商店打不开,错误代码0x80131500
  7. linux用sed替换字符,Linux中使用sed命令替换字符串小结
  8. vmware安装了vmware tools还是无法复制文件与文本(ubuntu16.04)
  9. Linux上恢复被删除的文件或目录
  10. 电容有哪些用途?常见的九大作用