lodop打印设计
<template>
<div class="dashboard-container">
<form id="form1">
<table border="1" width="300" id="tb01" bgcolor="#CCFFCC" style="border:solid 1px black;border-collapse:collapse"><tr><td width="133" id="mtb001">
<font face="黑体" color="#FF0000" size="3"><u> 《表单一》 </u></font></td></tr></table>
<table border="1" width="300" height="106" cellspacing="0" bgcolor="#CCFFFF"style="border-collapse:collapse;table-layout:fixed;border:solid 1px black;"><tr>
<td width="66" height="16" style="border:solid 1px black"><font color="#0000FF">A</font><font color="#0000FF">等</font></td>
<td width="51" height="16" style="border:solid 1px black"><font color="#0000FF">B</font><font color="#0000FF">等</font></td>
<td width="51" height="16" style="border:solid 1px black"><font color="#0000FF">C</font><font color="#0000FF">等</font></td></tr>
<tr>
<td width="66" height="16" style="border:solid 1px black">A<sub>01</sub></td>
<td width="80" height="12" style="border:solid 1px black">中-001</td>
<td width="51" height="12" style="border:solid 1px black">C1<sup>x</sup></td>
</tr>
<tr>
<td width="66" height="16" style="border:solid 1px black">A<sub>02</sub>Φ</td>
<td width="80" height="16" style="border:solid 1px black">日-スの</td>
<td width="51" height="16" style="border:solid 1px black"><font face='Vernada'>7㎥</font></td>
</tr>
<tr><td width="66" height="16" style="border:solid 1px black;overflow:hidden">A<sub>03</sub><nobr>over隐藏后面的:1234567890</nobr>
</td><td width="80" height="16" style="border:solid 1px black;overflow:hidden">韩-안녕</td><td width="51" height="16">C3<sup>x</sup>
</td></tr> </table>
</form> <hr>
<el-button @click="prn1_preview()">打印预览</el-button>
<el-button @click="design()">打印设计</el-button>
<textarea name="" id="" cols="30" rows="10" v-model="code"></textarea>
<el-button @click="createFun()">生成方法</el-button>
</div> </template> <script>
var LODOP;
export default {
created(){
},
mounted(){
}, data(){
return {
lalala:{name:"哈哈"},
code:localStorage.getItem("code")?localStorage.getItem("code"):"",
}
},
methods:{
prn1_preview(){
this.CreateOneFormPage();
LODOP.PREVIEW();
},
CreateOneFormPage(){
LODOP=getLodop();
LODOP.PRINT_INIT("打印控件功能演示_Lodop功能_表单一");
LODOP.SET_PRINT_STYLE("FontSize",18);
LODOP.SET_PRINT_STYLE("Bold",1);
LODOP.ADD_PRINT_TEXT(50,231,260,39,"打印页面部分内容");
LODOP.ADD_PRINT_HTM(88,200,350,600,document.getElementById("form1").innerHTML); },
design(){
LODOP=getLodop();
LODOP.PRINT_DESIGN()
},
createFun(){
LODOP=getLodop();
console.log(this.code)
localStorage.setItem("code",this.code);
var str=this.code.replace("name","冯庆海");
var str2=str.replace("city","北京市");
console.log(str2)
eval(str2);
LODOP.PREVIEW();
},
}
}
</script> <style lang="scss" scoped></style>
整体思路是,点击打印设计,将设计好的代码,粘贴到文本域中,然后点击生成方法,将代码存储,然后替换里面的name,city字符串,然后用eval()执行,然后预览!!!
当然也可以调用直接打印。后续继续更新。
lodop打印设计的更多相关文章
- Lodop打印设计(PRINT_DESIGN)介绍
打印设计(PRINT_DESIGN)界面上方有两栏菜单栏,举例说明(文本框,条码,图形等).(1)第一排最左侧第一个功能,位置移动:控制里面元素微上下左右移动,每次移动一个px.(用于微调,普通调整可 ...
- Lodop打印设计里的 打印项对齐
打印设计界面里,有四个对齐的图标:(1)第一个图标是左右对齐方式,该图标下有四种左右对齐方式.(2)第二个图标是上下对齐方式,该图标下有四种上下对齐方式.(3)第三个图标是等宽对齐,该图标下有三种等宽 ...
- Lodop打印设计(PRINT_DESIGN)里的快捷键
Lodop打印控件,给开发人员提供了可视化编辑工具,编辑后可生成代码,然后复制到自己程序代码中,让开发更简单,打印设计中有一些快捷键也能让开发更便捷. 打印设计快捷键:ctrl 多个选中Shift 左 ...
- [简短问答]LODOP如何查看用LODOP打印设计的代码
该博文为图文简短问答,具体详细介绍可查看本博客的相关博文,生成JS代码相关详细博文:Lodop打印设计(PRINT_DESIGN)介绍.Lodop打印设计.维护.预览.直接打印简单介绍.Lodop打印 ...
- Lodop打印设计、维护、预览、直接打印简单介绍
四者的区别和联系:(其中PRINT_DESIGN打印设计是提供给开发人员的,另外三个可开放给用户)PRINT_DESIGN打印设计:辅助开发人员设计,图形化拖动插入修改等,设计完成后,生成代码拷贝到程 ...
- Lodop打印设计矩形重合预览线条变粗
LODOP中的打印设计是辅助进行开发的,实际打印效果应以预览为准,很多效果都是在设计界面显示不出来,或设计和预览界面有差异.例如add_print_text文本的字间距.行间距,旋转,还有允许标点溢出 ...
- Lodop打印设计界面生成代码带”...(省略)”
Lodop的设计界面中,菜单里的生成代码,如果打印项内容过多,后面会显示”...(省略)”,省略的是打印项的内容值,无论是纯文本还是超文本,都可以用选中打印项-右键-设置属性里找到该打印项的全部值,可 ...
- LODOP打印维护适应不同的客户端
之前的博文:Lodop打印设计.维护.预览.直接打印简单介绍,介绍了打印设计.打印维护.打印预览,直接打印等的区别和使用. 如上面以前博文描述的,打印维护是针对客户端进行调整的,开放打印维护给客户端, ...
- LODOP设置打印设计返回JS代码是变量
前面有一篇博文是介绍JS模版的加载和赋值,赋值有两种,详细可查看本博客的那篇博文:LodopJS代码模版的加载和赋值简单来说,就是打印项的值是变量,在添加打印项前进行赋值:打印项的值是字符串,给打印项 ...
随机推荐
- 夯实基础:彻底搞清楚Cookie 和 Session 关系和区别(转)
原文地址:http://www.sohu.com/a/281228178_120047080 网络请求中的cookie与set-Cookie的交互模式和作用:https://my.oschina.ne ...
- java.lang.ClassCastException: com.sun.proxy.$Proxy4 cannot be cast
解决方案 在配置文件中配置proxy-target-class="true" <aop:aspectj-autoproxy proxy-target-class=" ...
- 【SQL Server性能优化】运用SQL Server的全文检索来提高模糊匹配的效率
原文:[SQL Server性能优化]运用SQL Server的全文检索来提高模糊匹配的效率 今天去面试,这个公司的业务需要模糊查询数据,之前他们通过mongodb来存储数据,但他们说会有丢数据的问题 ...
- .NET Core 使用ModelBinder去掉所有参数的空格
一.前言 通过各种姿势搜索都没搜到这方面的,唯一找到一个比较符合的,但是只适合简单类型,而且代码还没贴全,心累.. 然后查看官网和源码之后,发现继承并实现 IModelBinder和IModelBin ...
- 8.Redis的复制(Master/Slave)
Redis的复制(Master/Slave) a)是什么 行话:也就是我们所说的主从复制,主机数据更新后根据配置和策略,自动同步到备机的master/slaver机制,Master以写为主,Slave ...
- 【问题】No manual entry for pthread_create in section 3
参考文章:https://blog.csdn.net/wwwlyj123321/article/details/79211184 apt-get install manpages-posix manp ...
- keil 选项卡设置
*1.optimization : level2. *2. 2)硬件目标设置选项卡(Target),见图6所示. 图6 1:选择硬件目标设置选项卡 2:指定用于的晶振频率 3:在应用中可以选择实时操 ...
- [ 转载 ] vue.js面试题一
转载自:https://www.cnblogs.com/aimeeblogs/p/9501490.html 如有侵权 联系删除 Vue.js面试题整理 一.什么是MVVM? MVVM是Model-Vi ...
- 教程|Anaconda在Windows上安装及使用
Anaconda是一个python环境管理软件.可以建立环境,并向环境装安装自己需要的包. 其优势是可以不用自己一个一个安装包,极大地减少了因为配置环境而产生的时间成本:同时多个环境相互独立,为不同项 ...
- 验证码输入自动聚焦下一个input或者删除自动聚焦上一个input
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...