<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. Apache2.4+Tomcat7.0+php5.5整合配置详解

    在上一篇的基础上,继续添加php的配置 一.首先下载php5.5 首先下载php5.5,到官网下载http://www.php.net/downloads.php,参考http://www.cnblo ...

  2. ASP.NET Core本身已经集成了一个轻量级的IOC容器

    1.services.AddTransient<IApplicationService,ApplicationService>//服务在每次请求时被创建,它最好被用于轻量级无状态服务(如我 ...

  3. axios全局配置及拦截器

    axios使用说明文档 axios 全局配置: //axios-init.js import axios from 'axios': let loadingInstance; //创建Loading ...

  4. cnn健康增胖和调理好身体

    吃不胖,其实大部分情况是消化系统不好,大部分食物都没有被身体吸收就被排掉了. 1,改善肠胃消化功能: 每天早上一杯全脂鲜牛奶(或者羊奶), 每天晚上一杯酸奶 ps:白天和鲜牛奶可以激发肠胃的消化能力. ...

  5. 通用http状态码

    400:Bad Request 表示客户端发出的请求不支持或无法识别,这通常是并未使用正确的请求语法.例如post或者put请求中资源的某个字段被设置为空的话,这将会导致一个Bad Request响应 ...

  6. class类 - extends

    继承是面向对象中一个比较核心的概念.ES6 class的继承与java的继承大同小异,如果学过java的小伙伴应该很容易理解,都是通过extends关键字继承.相较于ES5当中通过原型链继承要清晰和方 ...

  7. K2 BPM_K2受邀出席QAD 2019年亚太区用户大会_全业务流程管理专家

    6月12-13日,K2受邀参加了以“云聚创新,智造未来”为主题的QAD 2019年亚太区用户大会.会议上K2同与会嘉宾们共商制造业数字化转型,就如何用流程赋能企业实现智能制造进行了精彩分享. 近期发布 ...

  8. Go 信道Channel

    信道(Channel) 信道(Channel)可以被认为是协程之间通信的管道.数据可以从信道的一端发送并在另一端接收. 默认为同步模式,需要发送和接收配对.否则会被阻塞,直到另外的信道准备好后被唤醒. ...

  9. springboot 部署到tomcat,获取根路径问题。空格变为%20

    String path = ResourceUtils.getURL("classpath:").getPath()+"static/upload"; Syst ...

  10. GVIM、VIM

    全世界最好的编辑器VIM之Windows配置篇 Highlight all search pattern matches Top 10 things Vi user need to know abou ...