非单页结构，是在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();