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>&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（）执行，然后预览！！！

当然也可以调用直接打印。后续继续更新。

原文地址：https://www.cnblogs.com/fqh123/p/11295994.html