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