lodop是当前最流行的打印Web打印组件，可以直接打印html
如何将打印样板添加到lodop常见的打印功能包括打印样板和数据源。 利用Vue的动态组件，可以在lodop中添加打印模板以实现按需打印
1、创建html，并在显示数据的地方将其替换为Vue语法。 例如，{{printData.UserName}}，将此html保存到数据库就是打印模板
2、接口定义div存储动态组件，将数据源Json加载到Vue中，加载打印模板生成组件，然后让lodop打印该div即可
divid=' preview div ' component : is=' cprintername '/component/div打印模板的设计者它以固定的Json对象作为数据源，html CSS
使用Vue的component动态组件将Json对象作为数据源传递，根据数据源手动设计组件的模板，实时预览设计效果，并结合lodop打印
！ doctypehtmlhtmllang=' en ' headmetacharset=' utf-8 ' link rel=' style sheet ' href=' https://un pkg.com/element-ui/文本对齐：左； width: 200px； height: 600px； }.El-main { background-color : # e9eef 3； 颜色： # 333； 文本对齐：左； }/style/headbodydivid=' app ' El-containerel-aside div数据源： div {{strObj2}} /div /div/El-aside El-containerel-mainel-tabs value=' design ' @ ta B- click=' createprintcomponent ' El-ta B- panelabel=' te 请输入latestr '/El-input/El-ta B-pane El-ta B-panelabel='打印预览' El-button divid=' preview div ' component 330 El-tabs/El-manager divscriptsrc=' https://cdn.jsdelivr.net/NPM/vue '/script src=' https://un pkg.com/element-element --script src=' lib/lodopfuncs.js '/script script type=' text/JavaScript
P = 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": "dzdhk", "address": "上海市普陀区金沙江路 1518 弄" }, { "date": "2016-05-04", "name": "fzdmt", "address": "上海市普陀区金沙江路 1517 弄" }, { "date": "2016-05-01", "name": "sqdxmg", "address": "上海市普陀区金沙江路 1519 弄" } ] } } } }); </script></body></html>