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>