vue + html + Lodop打印功能

1.官网下载 http://www.lodop.net/download.html

2.解压安装运行

点击CLodop_Setup_for_Win32NT.exe进行安装

3.vue代码实现(具体操作见官网:http://www.lodop.net/faq/pp35.html)

3.1把官方提供的LodopFuncs.js文件保存到项目某个目录下

3.2 修改LodopFuncs.js文件, 在文件最底部添加一行代码

export { getLodop }; //导出getLodop

把该文件中的getLodop函数 export 出来

4.vue 前端代码

5.编写html页面

5.1 打印按钮

<el-button @click="btnClickPrint" size="small" type="primary">打印

5.2 html列表页面

dataList为Java后端接口查询的列表数据

序号 扫描人 问题数量 扫描页数 错误率
{{index + 1}} {{dataList[index] == null ? "" : dataList[index].scannedName}} {{dataList[index] == null ? "" : dataList[index].problemNumber}} {{dataList[index] == null ? "" : dataList[index].scanPageNumber}} {{dataList[index] == null ? "" : dataList[index].errorRate}}

5.3 定义data数据

data () {

return {

htmlCode: '',

tableShow: false,

}

}

5.4 打印方法

btnClickPrint () {

//1. 获取vue中html页面(vue页面编写style不要有scoped,会使html元素中携带data-v-123a743a,造成页面不显示。获取页面全部数据:this. e l . o u t e r H T M L ) t h i s . h t m l C o d e = t h i s . el.outerHTML) this.htmlCode = this. el.outerHTML)this.htmlCode=this.refs.problemContent.innerHTML

console.log(this.htmlCode)

// 因为html设置了v-show,获取html页面会携带style="display: none;"

this.htmlCode = this.htmlCode.replace('style="display: none;"','').replace(' ','')

//2. 参数(this.htmlCode) = 页面样式 + html页面代码

var strBodyStyle = ""

this.htmlCode = strBodyStyle + this.htmlCode

//3. 调用getLodop获取LODOP对象

let LODOP = getLodop()

//4. 初始化

LODOP.PRINT_INIT("")

//5. 参数设置(距上部高度 左边距 宽度 高度 html页面)

LODOP.ADD_PRINT_HTM("5%","5%","100%","90%",this.htmlCode)

//6. 打印 (输出pdf文件,底部含有LODOP打印标识:LODOP.PRINT())

LODOP.PREVIEW()

}

相关推荐
blammmp20 分钟前
Java:数据结构-枚举
java·开发语言·数据结构
暗黑起源喵39 分钟前
设计模式-工厂设计模式
java·开发语言·设计模式
WaaTong43 分钟前
Java反射
java·开发语言·反射
王哲晓1 小时前
第三十章 章节练习商品列表组件封装
前端·javascript·vue.js
理想不理想v1 小时前
‌Vue 3相比Vue 2的主要改进‌?
前端·javascript·vue.js·面试
酷酷的阿云1 小时前
不用ECharts!从0到1徒手撸一个Vue3柱状图
前端·javascript·vue.js
九圣残炎1 小时前
【从零开始的LeetCode-算法】1456. 定长子串中元音的最大数目
java·算法·leetcode
wclass-zhengge1 小时前
Netty篇(入门编程)
java·linux·服务器
Re.不晚2 小时前
Java入门15——抽象类
java·开发语言·学习·算法·intellij-idea
雷神乐乐2 小时前
Maven学习——创建Maven的Java和Web工程,并运行在Tomcat上
java·maven