完成打印模板
This commit is contained in:
parent
0b1110cc37
commit
9f9eb79638
|
@ -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)));
|
||||
},
|
||||
},
|
||||
};
|
|
@ -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>
|
||||
|
|
Loading…
Reference in New Issue
Block a user