table2excel 导出真分页数据如何处理2

table2excel 导出真分页数据如何处理
导入js:

<script type="text/javascript" src="${base}/js/jquery.table2excel.js"></script>

html部分:

 <div class="ui edit buttons">
    <button class="query ui red button" id="submit">查询</button>
    <button class="query ui green button" id="export">导出</button>
</div>
<div class="column" id="column">
		<table id="column1" class="ui very compact selectable celled table mini">
				  <thead>
				   	 <tr>
				   	 	<th>序号</th>
				   		<th>科室</th>
				   		<th>姓名</th>
				   		<th>工号</th>
				   		<th>工龄</th>
				   		<th>职称</th>
				   		<th>类型</th>
				   		<th>原因</th>
				   		<th>申请时间</th>
				   		<th>离院时间</th>
				   		<th>状态</th>
				   		<th>操作</th>
				   	 </tr>
				  </thead>
				  <tbody id="tbody1" style="cursor:pointer">

      			  </tbody>
      			  <tfoot>
	      				 <tr>
						    <th colspan="12" id="pageBox">
						    </th>
					    </tr>
	      			</tfoot>
		</table>
	</div>
<div id="printTableDiv" style="display: none">
	    <table id="printTable">
	        <thead>
	        <tr>
	            <th>序号</th>
		   		<th>科室</th>
		   		<th>姓名</th>
		   		<th>工号</th>
		   		<th>工龄</th>
		   		<th>职称</th>
		   		<th>类型</th>
		   		<th>原因</th>
		   		<th>申请时间</th>
		   		<th>离院时间</th>
		   		<th>状态</th>
	        </tr>
	        </thead>
	        <tbody></tbody>
	    </table>
	</div>
$(document).ready(function() {
 //导出
    $("#export").click(function () {
        parent.layer.confirm('您确定导出此文件?', {
            btn: ['确定', '取消'] //按钮
        }, function () {
            parent.layer.closeAll();
            showPrintTable();
            var cols=$("#printTable thead").find("th").length;
            $("#printTable").table2excel({
                exclude: ".noExl",
                name: "Excel Document Name",
                filename: "离职转岗退休报表",
                exclude_img: true,
                exclude_links: true,
                exclude_inputs: true,
                cols:cols
            });
        });
    });

    function showPrintTable(){
        var str = "";
        if (dataList.length == 0) {
            var count = $("#table thead tr ").children("th").length;
            str += "<tr><td colspan='" + count + "' style='font-size:1.0em'>很抱歉,暂无数据</td></tr>";
        } else {
            for (var i = 0; i < dataList.length; i++) {
            	str += renderTable(i, dataList[i], false);
            }
        }
        $("#printTable tbody").html(str);
    }
});

//加载数据方法
	function loadData(curr,maproot){
		var deptid=$("#dept_id").val();
		var type=$("#type").val();
		var reason=$("#reason").val();
		var starttime=$("#starttime").val();
		var endtime=$("#endtime").val();
		var userName=$("#userName").val();
		var jsonData={deptid:deptid,reason:reason,type:type,starttime:starttime,endtime:endtime,userName:userName};
		$.layerPagerAjax({
			url: basePath+'/personRegister/view.do',
			datas:jsonData,
			limit:10,
			pagerBoxId:"pageBox",
			isViewPagerInfo:true,
			skin: '#D95C5C',
			groups:5,
			skip: true,
			pageNumber:curr,
			succuss:function(msg){
					$("#tbody1").empty();
					var str="";
					var datas=msg.list;
					dataList = datas;
					if(datas.length==0){
						var count=$("#column1 thead tr ").children("th").length;
						$("#tbody1").append("<tr><td colspan='"+count+"' style='font-size:1.9em'>很抱歉,暂无数据</td></tr>");
					}else{
						var reasonname,useid,workingYear,teachnical;
						for(var i = 0;i<datas.length;i++){
							str += renderTable(i, datas[i], true);
						}
						$('#tbody1').append(str);
				}
			},
			error:msgError
		})
	}
	function renderTable(i, data, needbtn){
		 var userid=$("#loc_user_id").val();
			var stateStr="";
			var stateInfo="审核中";
			if(maproot.b6!=undefined && data.state==0){
			   stateInfo="待审核";
			   stateStr+="<button class='ui edit green  button' name='edit' id="+data.id+" type='3'>审核</button>";
			}
			if((data.operationusrid==userid && data.state==0) || maproot.a2=="a2"){
			   stateStr+="<button class='ui edit orange  button'name='edit'  type='2' id="+data.id+" >编辑</button>";

			}if(data.state==1){
				var day_count=data.day_count;
				if(Number(day_count)<0){
					 stateInfo="待执行";
				}else{
					 stateInfo="已审核";
				}
			   stateStr="<button class='ui edit blue  button' name='look'  type='1' id="+data.id+">查看</button>";
			}if(maproot.a4!=undefined ){
			    stateStr+="<button class='ui edit  button' name='delete' data-user="+data.userid+"  id="+data.id+">删除</button>";
			}
			if(data.state==2){
			   stateInfo="退回";
			   stateStr+="<button class='ui edit orange  button'name='edit'  type='2' id="+data.id+" >编辑</button>";
			}

			reasonname=data.reasonname;
			useid=data.userid;
			if(!data.teachnicals && !data.teachnical){
				teachnical="";
			}else{
				teachnical=data.teachnical?data.teachnical:data.teachnicals
			}
			if(!data.workingYears && !data.workingYear){
				workingYear="";
			}else{
				workingYear=data.workingYear?data.workingYear:data.workingYears+"年"
			}
			//召回
			if(data.typename == "召回"){
				stateInfo="完结";
			}

			if(stateInfo == "完结" || stateInfo == "待执行" || stateInfo == "已审核"){
				stateStr="<button class='ui edit blue  button' name='look' type='1' id="+data.id+">查看</button>";
			}

			return "<tr data-state="+data.state+"><td>"+(i+1)+"</td>"
			+"<td>"+data.structure_name+"</td>"
			+"<td>"+data.username+"</td>"
	   		+"<td>"+(useid?useid:"")+"</td>"
	   		+"<td>"+workingYear+"</td>"
	   		+"<td>"+teachnical+"</td>"
			+"<td>"+data.typename+"</td>"
			+"<td>"+(reasonname?reasonname:"")+"</td>"
			+"<td>"+timestampToTime(data.datime)+"</td>"
			+"<td>"+timestampToTime(data.leavetime)+"</td>"
			+"<td>"+stateInfo+"</td>"
			+(needbtn?"<td><div class='ui edit buttons'>"+stateStr+"</div></td>":"");
		 
	}

### 回答1: Vue中的el-table组件是一个强大的表格组件,它可以方便地展示大量数据,并且支持分页功能。同时,借助前端库file-saver,我们可以实现将el-table中的数据导出Excel文件。 要实现这个功能,首先需要在Vue项目中安装file-saver库。可以使用npm或者yarn命令进行安装。 安装完毕后,我们可以在需要导出Excel的页面中引入file-saver库。 import { saveAs } from 'file-saver'; 在el-table数据源中,我们通常会使用一个数组来存储表格的数据。假设我们的表格数据tableData,我们可以通过将这个数组转换为Excel文件来实现导出功能。 首先将表格数据转换为二维数组的形式,使得每一行的数据存储在一个小数组中。 const exportData = tableData.map(row => { return Object.values(row); }); 然后,我们可以使用file-saver库提供的saveAs函数来将数据导出Excel文件。我们需要将二维数组导出为一个csv格式的文本文件,并使用saveAs函数保存文件。 const csvContent = exportData.map(row => row.join(",")).join("\n"); const blob = new Blob(["\ufeff" + csvContent], { type: "text/csv;charset=utf-8" }); saveAs(blob, "export.csv"); 在上述代码中,我们首先将二维数组通过map和join方法转换为一个csv格式的字符串,然后使用Blob创建一个Blob对象,最后使用saveAs函数将Blob对象保存为一个名为export.csv的文件。 通过上述步骤,我们就可以实现在Vue中使用file-saver库将el-table中的分页数据导出Excel文件。导出的文件可以方便地在Excel中查看和处理。 ### 回答2: Vue的el-table组件和FileSaver,可以实现前端导出Excel导出分页数据的功能。 首先,我们需要引入el-table和FileSaver库,并确保已经正确配置了Vue项目。然后,在组件中使用el-table,并将分页数据绑定到el-table的data属性上。 接下来,我们需要添加一个导出按钮,用于触发导出操作。当按钮被点击时,我们可以通过el-table的方法将分页数据转换为一个二维数组,并使用FileSaver库将该数组导出Excel文件。 具体实现步骤如下: 1. 引入el-table和FileSaver库: ``` import FileSaver from 'file-saver'; import { ElTable, ElTableColumn } from 'element-ui'; ``` 2. 在组件中使用el-table,并将分页数据绑定到data属性上: ``` <template> <el-table :data="tableData"> <el-table-column prop="name" label="姓名"></el-table-column> <el-table-column prop="age" label="年龄"></el-table-column> ... </el-table> </template> <script> export default { data() { return { tableData: [], // 分页数据 ... }; }, ... }; </script> ``` 3. 添加一个导出按钮,并在按钮的点击事件中执行导出操作: ``` <template> <el-table :data="tableData"> ... </el-table> <el-button @click="exportExcel">导出Excel</el-button> </template> <script> export default { ... methods: { exportExcel() { const data = this.$refs.table.store.states.data; // 获取所有数据 const columns = this.$refs.table.columns.map(column => column.label); // 获取表头 const tableData = [columns, ...data]; // 构造二维数组 const worksheet = XLSX.utils.aoa_to_sheet(tableData); const workbook = XLSX.utils.book_new(); XLSX.utils.book_append_sheet(workbook, worksheet, 'Sheet1'); const excelBuffer = XLSX.write(workbook, { bookType: 'xlsx', type: 'array' }); const blob = new Blob([excelBuffer], { type: 'application/octet-stream' }); FileSaver.saveAs(blob, 'data.xlsx'); }, ... } }; </script> ``` 以上代码通过el-table的$refs属性获取到el-table的实例,从而可以获取到所有数据和表头,并进行导出操作。最后使用FileSaver库将二维数组保存为Excel文件,文件名为data.xlsx。 通过以上步骤,我们可以实现vue el-table前端导出Excel导出分页数据的功能。 ### 回答3: 在使用vue el-table和file-saver前端导出Excel时,默认情况下只会导出当前展示页面的数据,无法导出分页数据。但我们可以通过以下步骤来实现导出分页数据的功能。 首先,我们需要手动获取所有需要导出数据。可以通过向后端发送请求获取所有数据的接口,并在前端将返回的数据进行合并。 然后,使用file-saver库将合并后的数据导出Excel文件。可以使用Blob对象将数据转换为二进制文件,再通过saveAs方法将二进制文件保存为Excel文件。 最后,展示给用户下载链接或直接自动下载导出Excel文件。 这样,我们就可以实现使用vue el-table和file-saver前端导出分页数据的功能。 需要注意的是,如果数据量较大,一次性获取全部数据可能会影响前端性能和用户体验。因此,可以考虑在导出功能中添加限制,例如设置最大导出数量或者提供导出当前页和导出全部数据的选项供用户选择。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值