非單頁結構，是在mvc視圖中引用vue和elementui來使用的，打印el-table表格內容時，可能是因爲樣式的原因，打印的格式很難調整，在界面中增加一個隱藏的div，裏面放個table，獲取數據後填充table，打印這個table的內容，樣式就好調整了。
@{
ViewBag.Title = "學生基本信息統計";
Layout = "~/Views/Shared/_vueLayout.cshtml";
}
<link href="~/Content/TableStyle.css" rel="stylesheet" />
<script language="javascript" src="~/Scripts/Lodop/LodopFuncs.js"></script>
<script src="~/Scripts/vue/dept.js"></script>
<script src="~/Scripts/vue/grade.js"></script>
<script src="~/Scripts/vue/ban.js"></script>
<div id="app">
<el-row>
<el-form :inline="true" size="mini">
<el-form-item label="專業：">
<spec-combo v-model=frmsrh.spno></spec-combo>
</el-form-item>
<el-form-item label="年級：">
<grade-input v-model="frmsrh.grade">
</grade-select>
</el-form-item>
<el-form-item label="班級：">
<ban-input v-model="frmsrh.classno" v-bind:spno="frmsrh.spno" v-bind:grade="frmsrh.grade"></ban-input>
</el-form-item>
<el-form-item label="學號：">
<el-input v-model="frmsrh.stid" style="width:100px;" clearable></el-input>
</el-form-item>
<el-form-item label="姓名：">
<el-input v-model="frmsrh.name" style="width:100px;" clearable></el-input>
</el-form-item>
<el-form-item label="當前狀態：">
<el-select v-model="frmsrh.changetype" placeholder="請選擇">
<el-option v-for="item in stuflag" :key="item.value" :label="item.label" :value="item.value">
</el-option>
</el-select>
</el-form-item>
<el-form-item>
<template>
<el-button type="primary" icon="el-icon-search" size="mini" v-on:click="list">查詢</el-button>
<el-button type="primary" icon="el-icon-printer" size="mini" v-on:click="print">打印</el-button>
<el-button type="primary" icon="el-icon-download" size="mini" v-on:click="exp">導出</el-button>
</template>
</el-form-item>
<el-form-item label="分組條件：">
<el-checkbox-group v-model="frmsrh.gfields">
<el-checkbox v-for="g in groupfields" :label="g.id" :key="g.id" :disabled="g.dis" :checked="g.chk">
<template>{{g.text}}</template></el-checkbox>
</el-checkbox-group>
</el-form-item>
</el-form>
</el-row>
<el-table ref="tab" size="mini" :data="table.data" border v-loading="loading">
<el-table-column v-for="c in table.cols" :label="c.text" :prop="c.id" align="center"></el-table-column>
</el-table>
<div id="stReport" style="display: none;">
<table id="stTable" class="t2" border=1 align="center" style="width:95%">
<th v-for="c in table.cols">{{c.text}}</th>
<tr v-for="(d,index) in table.data" >
<td v-for="c in table.cols">{{getdata(index,c.id)}}</td>
</tr>
</table>
</div>
</div>
<script>
new Vue({
el: '#app',
data() {
return {
stuflag: [{ value: '', label: '全部' }, { value: '在校', label: '在校' }, { value: '離校', label: '離校' }],
groupfields: [
{ 'text': '年級', 'id': 'grade' },
{ 'text': '院系名稱', 'id': 'dptname' },
{ 'text': '專業名稱', 'id': 'spname' },
{ 'text': '班級', 'id': 'class' },
{ 'text': '錄取類型', 'id': 'lqtype' },
{ 'text': '生源地市', 'id': 'ds' },
{ 'text': '生源縣區', 'id': 'xq' },
{ 'text': '性別', 'id': 'sex' },
{ 'text': '民族', 'id': 'nation' },
{ 'text': '政治面貌', 'id': 'political' },
{ 'text': '籍貫', 'id': 'nativeplace' },
{ 'text': '培養層次', 'id': 'type' },
{ 'text': '最新狀態', 'id': 'changetype' },
{ 'text': '最新變更狀態', 'id': 'changestate' },
{ 'text': '補錄否', 'id': 'bl' },
{ 'text': '班級數', 'id': 'num_class', dis: true, chk: true },
{ 'text': '人數', 'id': 'num', dis: true, chk: true }
],
frmsrh: {
spno: '',
grade: '',
classno: '',
stid: '',
name: '',
changetype: '',
gfields: [],
groupfields: ''
},
table: {
cols: [],
data: []
},
loading: false
}
},
methods: {
list() {
this.table.cols = [];
this.groupfields.forEach(item => {
if (this.frmsrh.gfields.indexOf(item.id) >= 0) {
this.table.cols.push(item);
}
})
var that = this;
this.frmsrh.groupfields = '';
this.frmsrh.gfields.forEach(item => {
if (item != 'num_class' && item != 'num') {
this.frmsrh.groupfields += ',' + item;
}
})
if (this.frmsrh.groupfields) {
this.frmsrh.groupfields = this.frmsrh.groupfields.substr(1);
}
$.post('/Admin_Areas/StInfo/GetStinfoGroupBy', this.frmsrh, function (res) {
if (res.Msg) {
that.$message.error({ message: res.Msg, duration: 0, showClose: true });
}
else {
var obj = JSON.parse(res);
that.table.data = obj.rows;
}
})
},
print() {
var LODOP = getLodop();
LODOP.PRINT_INITA(10, 10, 754, 453, "學生統計結果");
LODOP.SET_PRINT_PAGESIZE(1, "210mm", "297mm", "");
var strs="<link href='/Content/TableStyle.css' rel='stylesheet' />";
var strp =strs+ $('#stReport').html();
LODOP.ADD_PRINT_TABLE("1mm", "2mm", "RightMargin:1mm", "BottomMargin:2mm", strp);
LODOP.PREVIEW();
},
getdata(index,id){
return this.table.data[index][id];
},
exp() {
var form = $("<form/>").attr('action', '/admin_areas/stinfo/ExpStinfoGroupBy').attr('method', 'post');
form.attr('target', '_blank');
this.frmsrh.groupfields = '';
this.frmsrh.gfields.forEach(item => {
if (item != 'num_class' && item != 'num') {
this.frmsrh.groupfields += ',' + item;
}
})
if (this.frmsrh.groupfields) {
this.frmsrh.groupfields = this.frmsrh.groupfields.substr(1);
}
$.each(this.frmsrh, function (k, v) {
form.append('<input type="hidden" name="{0}" value="{1}" />'.format(k, v));
});
form.appendTo("body").css('display', 'none').submit();
}
},
});
</script>
stReport 中放的是一個table，根據列與數據行來填充內容，打印時需要將樣式文件也傳進去
var strs="<link href='/Content/TableStyle.css' rel='stylesheet' />";
var strp =strs+ $('#stReport').html();