通过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}}
打印

你可能感兴趣的:(vue,lodop,打印模板)