vue+elementui+lodop打印表格
⾮单页结构，是在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="ade">
</grade-select>
</el-form-item>
<el-form-item label="班级：">
<ban-input v-model="frmsrh.classno" v-bind:spno="frmsrh.spno" v-bind:grade="ade"></ban-input>
</el-form-item>
<el-form-item label="学号：">
<el-input v-model="frmsrh.stid" clearable></el-input>
</el-form-item>
<el-form-item label="姓名：">
<el-input v-model="frmsrh.name" 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>
vue element admin
<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 ls" :label="c.text" :prop="c.id" align="center"></el-table-column>
</el-table>
<div id="stReport" >
<table id="stTable" class="t2" border=1 align="center" >
<th v-for="c ls">{{c.text}}</th>
<tr v-for="(d,index) in table.data" >
<td v-for="c ls">{{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() {
ls = [];
if (this.frmsrh.gfields.indexOf(item.id) >= 0) {
ls.push(item);
}
})
var that = this;
upfields = '';
this.frmsrh.gfields.forEach(item => {
if (item != 'num_class' && item != 'num') {
upfields += ',' + item;
}
})
if (upfields) {
upfields = upfields.substr(1);
}
$.post('/Admin_Areas/StInfo/GetStinfoGroupBy', this.frmsrh, function (res) {
$.post('/Admin_Areas/StInfo/GetStinfoGroupBy', this.frmsrh, function (res) {
if (res.Msg) {
that.$({ message: res.Msg, duration: 0, showClose: true });
}
else {
var obj = JSON.parse(res);
that.table.data = ws;
}
})
},
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');
upfields = '';
this.frmsrh.gfields.forEach(item => {
if (item != 'num_class' && item != 'num') {
upfields += ',' + item;
}
})
if (upfields) {
upfields = upfields.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();

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。