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="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();

vue+elementui+lodop打印表格相关推荐

vue + elment ui打印表格数据
vue + elment ui打印表格数据主要的原理就是在vue项目中通过调用浏览器自带的打印功能,完成对table数据的打印解决表格错位以及elment ui 双重表头的问题封装一下打印 ...
Vue + Element-ui 实现table表格数据相同项合并
Vue + Element-ui 实现table表格数据相同项合并通过给table传入span-method方法可以实现合并行或列,方法的参数是一个对象 data() {return {table ...
vue+elementui 项目 table表格自定义排序规则
vue+elementui 项目 table表格自定义排序规则官方解释: 在列中设置 sortable 属性即可实现以该列为基准的排序,接受一个 Boolean,默认为 false.可以通过 Tab ...
vue+elementUI实现sku表格自动生成【效果图+源码】
vue+elementUI实现sku表格自动生成[效果图+源码] 先看一看效果图: 点击这里下载源码,下载后记得安装依赖:npm install
Vue.js ：使用LODOP打印表格文件
用到的打印工具是LODOP. 项目环境是vue-cli搭建的,组件库是ant design vue. 1.在需要打印的页面引入插件. <script>import { getLodop } ...
vue调用lodop打印
第一步: 安装 CLodop_Setup_for_Win32NT.exe LodopFuncs.js 后面添加一行 export { getLodop }; 第二步:VUE中引用 1.impor ...
python+vue+elementui在线打印系统
在线提交文档进行打印首页简单介绍系统顶部或主页按钮转到打印用户可以登录查看历史打印记录用户分学生和非学生通过管理员身份进行用户以及文件的管理软件编程是孤独的,也是枯燥的.在外行看似简单 ...
vue使用lodop打印插件
首先将lodop安装包放到static下下载地址:http://www.c-lodop.com/download.html 新建一个vue测试lodop功能 LodopFuncs.js var Cr ...
vue中printJS打印表格---json
使用html的方式打印表格总是不在A4纸的正中间出现的问题: (1)表格的行--显示不全 (2)数据过多分页---各自会被拆分在打印html的基础上进行改进,处理复杂采用type=json来进 ...

vue+elementui+lodop打印表格

vue+elementui+lodop打印表格相关推荐

最新文章

热门文章