<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>&nbsp;《表单一》&nbsp;</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&#13221</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打印设计的更多相关文章

  1. Lodop打印设计(PRINT_DESIGN)介绍

    打印设计(PRINT_DESIGN)界面上方有两栏菜单栏,举例说明(文本框,条码,图形等).(1)第一排最左侧第一个功能,位置移动:控制里面元素微上下左右移动,每次移动一个px.(用于微调,普通调整可 ...

  2. Lodop打印设计里的 打印项对齐

    打印设计界面里,有四个对齐的图标:(1)第一个图标是左右对齐方式,该图标下有四种左右对齐方式.(2)第二个图标是上下对齐方式,该图标下有四种上下对齐方式.(3)第三个图标是等宽对齐,该图标下有三种等宽 ...

  3. Lodop打印设计(PRINT_DESIGN)里的快捷键

    Lodop打印控件,给开发人员提供了可视化编辑工具,编辑后可生成代码,然后复制到自己程序代码中,让开发更简单,打印设计中有一些快捷键也能让开发更便捷. 打印设计快捷键:ctrl 多个选中Shift 左 ...

  4. [简短问答]LODOP如何查看用LODOP打印设计的代码

    该博文为图文简短问答,具体详细介绍可查看本博客的相关博文,生成JS代码相关详细博文:Lodop打印设计(PRINT_DESIGN)介绍.Lodop打印设计.维护.预览.直接打印简单介绍.Lodop打印 ...

  5. Lodop打印设计、维护、预览、直接打印简单介绍

    四者的区别和联系:(其中PRINT_DESIGN打印设计是提供给开发人员的,另外三个可开放给用户)PRINT_DESIGN打印设计:辅助开发人员设计,图形化拖动插入修改等,设计完成后,生成代码拷贝到程 ...

  6. Lodop打印设计矩形重合预览线条变粗

    LODOP中的打印设计是辅助进行开发的,实际打印效果应以预览为准,很多效果都是在设计界面显示不出来,或设计和预览界面有差异.例如add_print_text文本的字间距.行间距,旋转,还有允许标点溢出 ...

  7. Lodop打印设计界面生成代码带”...(省略)”

    Lodop的设计界面中,菜单里的生成代码,如果打印项内容过多,后面会显示”...(省略)”,省略的是打印项的内容值,无论是纯文本还是超文本,都可以用选中打印项-右键-设置属性里找到该打印项的全部值,可 ...

  8. LODOP打印维护适应不同的客户端

    之前的博文:Lodop打印设计.维护.预览.直接打印简单介绍,介绍了打印设计.打印维护.打印预览,直接打印等的区别和使用. 如上面以前博文描述的,打印维护是针对客户端进行调整的,开放打印维护给客户端, ...

  9. LODOP设置打印设计返回JS代码是变量

    前面有一篇博文是介绍JS模版的加载和赋值,赋值有两种,详细可查看本博客的那篇博文:LodopJS代码模版的加载和赋值简单来说,就是打印项的值是变量,在添加打印项前进行赋值:打印项的值是字符串,给打印项 ...

随机推荐

  1. diverta 2019 Programming Contest

    A:签到. #include<bits/stdc++.h> using namespace std; #define ll long long #define inf 1000000010 ...

  2. Idea 使用 Junit4 进行单元测试

    目录 Idea 使用 Junit4 进行单元测试 1. Junit4 依赖安装 2. 编写测试代码 3. 生成测试类 4. 运行 Idea 使用 Junit4 进行单元测试 1. Junit4 依赖安 ...

  3. (十六)Activitivi5之内置用户组(角色)设计表以及IdentityService

    一.内置用户组(角色)设计表概念 用户和组(或者叫做角色),多对多关联,通过关联表实现 act_id_user 用户表: act_id_group 用户组表: act_id_membership 用户 ...

  4. SQL Server系统函数:系统信息函数

    原文:SQL Server系统函数:系统信息函数 1.会话id,服务器信息.用户信息 select @@SPID, --返回当前连接的会话ID:SPID @@servername, --SQL Ser ...

  5. ubuntu装openssh-client和openssh-server

    1. 修改update源 进入/etc/apt/目录,首先用cp命令将sources.list备份成sources.list.bk,然后复制http://www.cnblogs.com/eastson ...

  6. 转载一篇有关于diff的文章,方便以后复习

    本文章是转载的,为了方便以后复习,特地记录一下.他人请去原地址观看!!! 文章原地址:http://www.ruanyifeng.com/blog/2012/08/how_to_read_diff.h ...

  7. ajax简单页面

    简单的注册页面运用ajax 主页面 <head><meta http-equiv="Content-Type" content="text/html; ...

  8. 9.Redis的Java客户端Jedis

    Redis的Java客户端Jedis Jedis所需jar包   commons-pool-1.6.jar jedis-2.1.0.jar 1.Jedis常用操作(jedis中的api 和 我们在 l ...

  9. 2.Redis 入门介绍

    A)入门概述: 1.是什么: Redis:REmote  Dlctionary  Server(远程字典服务器) 是完全开源免费的,用C语言编写的,遵循BSD协议,是一个高性能的(key/value) ...

  10. h5 移动端开发自适应 meta name="viewport"的使用总结

    本文系个人理解,可能有误差,仅供参考,谨慎采纳! 布局视口: 系统自带 一般大于屏幕宽度 理想宽度:  设置页面的viewport 的一个宽度,使不同的手机的布局视口宽度尽量接近可视窗口的值: 可视视 ...