java+vue+c-lodop插件实现打印模版管理思路及部分代码

下载插件什么的就不写了,网上很多,去官网就行了

一.需要实现的功能

1.网页创建打印模版,也就是新增模版
2.网页实现修改模版
3.打印的时候实现动态传参
注:不贴全部代码,后端api需自己写,都是简单的增删改查

二.思路及部分代码

1.创建一个数据表,结构如下,存放模版js代码以及模版名称

2.前端搭建

前端很简单,按钮就不贴代码了,下面是两个div,内嵌了一个iframe和一个textarea

    <div style="display:flex"><div style="width: 49%;height: 80vh; margin-top: 20px;margin-right: 5px; "><iframe style="width: 100%;height: 80vh" name="piframe" id="piframe"></iframe></div><div style="width: 49%;height: 80vh; margin-top: 20px;margin-right: 5px  ;border: black 1px solid"><div style="margin-top: 5px;margin-bottom: 3px;font-size: 18px">代码返回区</div><textarea rows="40" id="S1" cols="120" style="width: 99.5%"> </textarea></div></div>

3.新增模版功能
思路:点击新增打印设计窗口,关闭时返回js代码,然后点击保存,存入数据库

 addtemp() {//打开设计窗口let LODOP = getLodop();if (LODOP.CVERSION)CLODOP.On_Return = function (TaskID, Value) {document.getElementById('S1').value = Value;};//这里就是将设计完的js代码返回到textarea中document.getElementById('S1').value=LODOP.PRINT_DESIGN()this.isadding = false;this.isupdate=truethis.addname=''},

保存数据:
输入模版名后,点击保存执行下面的事件

 savetemp() {var jscodes =  document.getElementById('S1').value//获取到此时文本框中的js代码var jscodedic = {"jscode":jscodes}//这里是因为要和后端实体类结构对应,只传js代码到后端就会乱码axios.post("/PrintTemplate/saveTemp?pname="+this.addname,jscodedic).then(response => {if (response.data.status === 200) {this.warning("保存成功")this.isadding = truethis.adddig=falseaxios.post("/PrintTemplate/GetPrintTemp").then(response => {//重新获取数据if (response.data.status === 200) {this.templist = response.data.result;this.showamxid()} else this.dialog(response.data.message, 0)}).catch(error => this.dialog("网络错误", 1000));} else this.dialog(response.data.message, 0)}).catch(error => this.dialog("网络错误", 1000));},

4.修改模版功能
选择模版,从后端获取到该模版js代码,然后在iframe里展示模版,在textarea中显示js代码

       showdetail(){var js = ""for(let item of this.templist){//这里存放的是模版名及模版js代码数据if (item.id == this.choosedtemp){js = item.jscode//获取到选择的模版名的js代码break}}document.getElementById('S1').value=js//赋值给文本框this.jscode=js//LODOP.PREVIEW是展示,括号内填写iframe名称,不填写名称会打开新的页面去展示js= js+ "LODOP.PREVIEW(\"piframe\");"//执行js代码eval(js)},

效果图
可以通过代码修改,也可以通过打印设计页面修改模版

5.动态传参
需要新建一张参数表对应表

每次打印的时候获取到模版js代码的时候,通过for循环,将参数,这里只有一个name替换成后端传来的数据

prints(){var js = ""for(let item of this.templist){if (item.id == this.choosedtemp){js = item.jscodebreak}}var data={//后端传来的数据,需要用自己api替换,这里简略了name:"aaa" }var qz = "data."//前缀//获取模版js代码axios.post("/PrintTemplate/selectParams?pid="+this.choosedtemp).then(response => {if (response.data.status === 200) {var paramlist = response.data.result//替换参数for (let item  of  paramlist){js = js.replace('"'+item.jsparam+'"',qz+item.sqlparam)}//加上打印语句js=js+"LODOP.PRINT();"//执行打印eval(js)} else{this.$message({message: response.data.message,type: 'warning'});}}) ;}

好了,这就是一个简单的打印模版设计,可以动态管理打印模版的功能.

java+vue+c-lodop插件实现打印模版管理思路及部分代码相关推荐

VUE 集成 LODOP插件打印
VUE 集成LODOP插件打印 VUE 集成LODOP插件打印 Lodop.C-Lodop使用说明及样例 VUE简单使用lodop 1.创建LodopFuncs.js文件 2.在打印功能vue页面引入 ...
前端使用lodop插件进行打印设置
先前梳理了后台打印导出参考:https://www.cnblogs.com/yyk1226/p/9856032.html,但是没有显示出来打印预览页面. 本章使用Lodop插件进行打印设置,实现打印机 ...
VUE使用lodop实现前端打印页面指定内容
最近做项目,遇到一个需要页面无需下载在线打印Word的功能,最初尝试直接打印页面,会导致将整个页面都打印出来,不符合要求.后期客户要求要使用lodop,这样打印与页面展示Word两个方面都是未知的东西 ...
Vue 中Lodop 实现批量打印
打印初始化放到for循环外,遍历的数组长度有多少就打印多少, for循环里面还是 this.LODOP = getLodop(); 这些,只是把初始化提到外面,打印预览也提到for循环外
lodop指定打印机打印_前端使用lodop插件进行打印设置
function PrintEntryOrder(data) { CreateEntryPrintPage(data); } function CreateEntryPrintPage(data) { ...
PAT Basic Level 1027 打印沙漏解题思路及AC代码
PAT 乙级 1027 打印沙漏 v1.0 1. 题目简述及在线测试位置 2. 基本思路 3. 完整AC代码 1. 题目简述及在线测试位置 1.1 给定N个字符,要求使用尽可能多的字符打印出一个沙漏. ...
lodop打印不显示页码_Lodop插件实现打印功能
下载lodop插件实现打印功能(element-ui框架) 一.vuejs弹窗部分 <el-dialog title="打印" width="960px" ...
php lodop完整案例,lodop判断是否打印成功
需要引用js 演示如何获得打印状态及控制打印: 1.先点执行打印获得该打印的JOB代码: 2. οnclick="document.getElementById('T2').value = ...
LODOP.ADD.PRINT_IMAGE()打印图片设置width和height不起作用？
最近在使用LODOP插件做打印需求,其中要打印(BASE64)图片,但是按照文档设置宽高,发现打印出来的图片大小没发生变化,经过一番研究发现,少设置了一个属性的锅 LODOP.SET_PRINT_ST ...

java+vue+c-lodop插件实现打印模版管理思路及部分代码

一.需要实现的功能

二.思路及部分代码

java+vue+c-lodop插件实现打印模版管理思路及部分代码相关推荐

最新文章

热门文章