通过Vue的动态组件实现打印模板设计器结合lodop打印

最新推荐文章于 2024-06-17 11:26:58 发布

包达叔

最新推荐文章于 2024-06-17 11:26:58 发布

阅读量1w

点赞数 21

文章标签： vue lodop 打印模板

本文链接：https://blog.csdn.net/zheyiw/article/details/97576477

版权

lodop是目前最流行的打印Web打印组件，可以直接打印html

如何为lodop添加打印模板

一般打印功能都有打印模板和数据源，利用Vue的动态组件，我们就可以为lodop添加打印模板，实现按需打印
1，编写一个html，在显示数据的地方用Vue语法替换例如：{{printData.UserName}}，把这个html保存到数据库就是打印模板了
2，界面定义一个div存放动态组件，把数据源Json加载到Vue中，加载打印模板生成组件，让lodop打印这个div就可以了

 <div id="previewdiv">
   <component :is="cprintername"></component>
 </div>

打印模板的设计器

这是一个打印模板的设计器: 以固定的Json对象作为数据源, 用Html+CSS+Vue来设计打印模板, 是一款适合开发人员的打印模板设计器
利用Vue的component动态组件传入一个Json对象做数据源,根据数据源就可以手动设计组件的template, 可以实时预览设计效果, 并结合lodop打印出来

<!doctype html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">

  <style>
    .el-aside {
      background-color: #D3DCE6;
      color: #333;
      text-align: left;
      width: 200px;
      height: 600px;
    }

    .el-main {
      background-color: #E9EEF3;
      color: #333;
      text-align: left;
    }
  </style>
</head>

<body>
  <div id="app">

    <el-container>
      <el-aside>
        <div>
          数据源:
          <div>
            {{strObj2}}
          </div>
        </div>
      </el-aside>
      <el-container>
        <el-main>
          <el-tabs value="design" @tab-click="createPrintComponent">
            <el-tab-pane label="模板设计" name="design">
              <el-input type="textarea" :rows="10" placeholder="请输入内容" v-model="templateStr">
              </el-input>
            </el-tab-pane>
            <el-tab-pane label="打印预览" name="preview">
              <el-button @click="print">打印</el-button>
              <div id="previewdiv">
                <component :is="cprintername"></component>
              </div>
            </el-tab-pane>
          </el-tabs>
        </el-main>
      </el-container>
    </el-container>

  </div>

  <script src="https://cdn.jsdelivr.net/npm/vue"></script>
  <script src="https://unpkg.com/element-ui/lib/index.js"></script>
  <!-- LodopFuncs.js是lodop打印使用,需要先安装lodop打印服务才能使用 -->
  <script src="lib/LodopFuncs.js"></script>
  <script type="text/javascript">
    function prn1_preview() {
      var 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("previewdiv").innerHTML);
      LODOP.PREVIEW();
    };

    new Vue({
      el: '#app',
      methods: {
        //根据数据源和打印模板创建打印组件
        createPrintComponent: function (tab, event) {
          console.log(tab)
          if (tab.paneName === "preview") {
            let pobj = this.strObj2; //传入打印数据源
            let templateStr = this.templateStr; //传入打印模板

            //动态创建组件名
            var timestamp = (new Date()).valueOf();
            var componentName = 'printer' + timestamp;

            //创建组件
            Vue.component(componentName, {
              data: function () {
                return {
                  printobj: pobj, //传入打印数据源
                }
              },
              template: '<div>' + templateStr + '</div>' //打印模板
            })

            //更新组件
            this.cprintername = componentName //显示打印组件
          }
        },
        print: function (event) {
          prn1_preview();
        }
      },
      data: function () {
        return {
          cprintername: '',
          //打印样式
          templateStr: 'name:  {{ printobj.name }} code: {{ printobj.code }}' +
            ' <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">日期</font></td>' +
            '<td width="51" height="16" style="border:solid 1px black"><font color="#0000FF">姓名</font></td>' +
            '<td width="51" height="16" style="border:solid 1px black"><font color="#0000FF">地址</font></td></tr> ' +
            '<tr v-for="item in printobj.tableData">' +
            '<td width="66" height="16" style="border:solid 1px black">{{item.date}}</td>' +
            '<td width="80" height="12" style="border:solid 1px black">{{item.name}}</td>' +
            '<td width="51" height="12" style="border:solid 1px black">{{item.address}}</td></tr> </table>',
          //打印数据源
          strObj2: {
            "code": "MyCode",
            "name": "MyName",
            "tableData": [{
                "date": "2016-05-02",
                "name": "王一虎",
                "address": "上海市普陀区金沙江路 1518 弄"
              },
              {
                "date": "2016-05-04",
                "name": "王二虎",
                "address": "上海市普陀区金沙江路 1517 弄"
              },
              {
                "date": "2016-05-01",
                "name": "王三虎",
                "address": "上海市普陀区金沙江路 1519 弄"
              }
            ]
          }
        }
      }
    });
  </script>
</body>

</html>

包达叔

关注

21
点赞
踩
49

收藏

觉得还不错? 一键收藏
2
评论
通过Vue的动态组件实现打印模板设计器结合lodop打印

lodop是目前最流行的打印Web打印组件，可以直接打印html如何为lodop添加打印模板一般打印功能都有打印模板和数据源，利用Vue的动态组件，我们就可以为lodop添加打印模板，实现按需打印1，编写一个html，在显示数据的地方用Vue语法替换例如：{{printData.UserName}}，把这个html保存到数据库就是打印模板了2，界面定义一个div存放动态组件，把数据源Json加载到Vue中，加载打印模板生成组件，让lodop打印这个div就可以了
复制链接

扫一扫