完成打印模板

This commit is contained in:
falcon 2020-06-02 10:36:34 +08:00
parent 0b1110cc37
commit 9f9eb79638
2 changed files with 56 additions and 13 deletions

View File

@ -83,5 +83,35 @@ var myjs = {
this.post(this.urls.GetServerTime, { format: format }, function (r) {
callback(r.str);
});
}
},
toExcel: {
uri: 'data:application/vnd.ms-excel;base64,',
template: '<html xmlns:o="urn:schemas-microsoft-com:office:office" xmlns:x="urn:schemas-microsoft-com:office:excel"' +
'xmlns="http://www.w3.org/TR/REC-html40"><head><meta charset="UTF-8"><!--[if gte mso 9]><xml><x:ExcelWorkbook><x:ExcelWorksheets><x:ExcelWorksheet>'
+ '<x:Name>{worksheet}</x:Name><x:WorksheetOptions><x:DisplayGridlines/></x:WorksheetOptions></x:ExcelWorksheet></x:ExcelWorksheets>'
+ '</x:ExcelWorkbook></xml><![endif]-->' +
' <style type="text/css">' +
'table td {' +
'border: 1px solid #000000;' +
'width: 200px;' +
'height: 30px;' +
' text-align: center;' +
' }' +
'</style>' +
'</head><body ><table class="excelTable">{table}</table></body></html>',
base64(s) {
return window.btoa(unescape(encodeURIComponent(s)));
},
format(s, c) {
return s.replace(/{(\w+)}/g,
function (m, p) {
return c[p];
});
},
tableToExcel(tableid, sheetName) {
if (!tableid.nodeType) tableid = document.getElementById(tableid);
var ctx = { worksheet: sheetName || 'Worksheet', table: tableid.innerHTML };
window.open(this.uri + this.base64(this.format(this.template, ctx)));
},
},
};

View File

@ -1,27 +1,29 @@
<div id="findPerson">
<div id="para" class="reportFilter">
<input type="hidden" name="ProcedureName" value="example" />
<input type="hidden" name="reportName" value="报表1" />
<input type="hidden" name="sqlStr" value="" />
<input type="hidden" name="ProcedureName" v-model="ProcedureName" />
<input type="hidden" name="reportName" v-model="reportName" />
<input type="hidden" name="sqlStr" v-model="sqlStr" />
<input type="hidden" name="uid" v-model="uid" />
<input type="hidden" name="uName" v-model="uName" />
<!--以下部分为查询条件,根据实际需要修改-->
<label>姓名:<input name="name" value="" placeholder="输入姓名或留空" /></label>
<label>地址:<input name="address" value="" placeholder="输入地址数据" /></label>
<label>地址:<input name="marry" value="" placeholder="是否结婚" /></label>
<button class="btn btn-primary" v-on:click="find">查询</button>
<button class="btn btn-primary" v-on:click="print">打印</button>
<button class="btn btn-primary" v-on:click="print">打印</button>
<button class="btn btn-primary" v-on:click="down" v-if="result.length > 0">下载EXCEL</button>
<!--可修改部分结束-->
</div>
<div id="result" v-if="result.length > 0">
<!--以下部分为存储过程返回数据,根据实际需要修改-->
<table class="table reportTable" id="resultTable">
<thead>
<tr>
<td>姓名</td>
<td>年龄</td>
<td>性别</td>
<td>登录用户编号</td>
<td>登录用户名</td>
<th>姓名</th>
<th>年龄</th>
<th>性别</th>
<th>登录用户编号</th>
<th>登录用户名</th>
</tr>
</thead>
<tbody>
@ -34,6 +36,7 @@
</tr>
</tbody>
</table>
<!--可修改部分结束-->
</div>
</div>
@ -41,6 +44,13 @@
var findPerson = new Vue({
el: "#findPerson",
data: {
//存储过程名称
ProcedureName: "example",
//报表名称
reportName: "报表1",
//除非你知道以下数据含义,否则不要修改
sqlStr: "",
url: myjs.urls.getresult,
result: [],
uid: "",
@ -53,7 +63,7 @@
methods: {
find() {
var sql = myjs.createSql("#para");
$("input[name='sqlStr']").val(sql);
this.sqlStr = sql;
console.log(sql);
myjs.post(this.url, { sql: sql }, function (d) {
findPerson.result = d;
@ -61,9 +71,12 @@
},
print() {
var sql = myjs.createSql("#para");
$("input[name='sqlStr']").val(sql);
this.sqlStr = sql;
myjs.print();
},
down() {
myjs.toExcel.tableToExcel("resultTable", this.reportName);
},
}
});
</script>