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

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

如何为lodop添加打印模板

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

打印模板的设计器

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

  
  

  



  


    
      
        

          数据源:
          

            {{strObj2}}
          
        
      
      
        
          
            
              
              
            
            
              打印