前端导出表格,万级数据,带样式(留自用)

普通excel 导出

1.下载插件 (推荐版本xlsx0.16.0)

//建议安装 0.16.3 的xlsx，高版本的好像会有问题 "file-saver": "^2.0.2", "xlsx": "^0.16.3"

 npm  install  -S file-saver
 npm install xlsx@0.16.0 -S 
 npm  install  -D script-loader

2.导入三个js文件

在src目录下新建utils文件夹，里面放入Blob.js和Export2Excel.js和dateUtil.js三个JS文件

 3.mian.js(两个js文件再文章末尾)

import Blob from './utils/Blob'

import Export2Excel from './utils/Export2Excel.js'

4.导出

html:

<el-button class="purple el-icon-upload2" @click="exportExcel()">导出</el-button>

js:

注: 当前表格为复选表格,所以对复选进行了相应判断

//引入  注意Export2Excel路径
import { export_json_to_excel } from '../../../utils/Export2Excel';  
import dateUtil from '../../../utils/dateUtil'

// 导出
		exportExcel() {
			const tHeader = ["竞赛名称", "竞赛开始时间","竞赛结束时间","得分","排名","获得奖项","指导老师","指导老师获得奖项"]; //对应表格输出的title
			const filterVal = ["rname", "starttime","endtime","mark","type","sprizename","teacher","tprizename"]; // 对应表格输出的数据
			let that = this;
			this.$confirm('确定要导出吗？', '提示', {
				type: 'warning'
			}).then(() => {
				// console.log(this.multipleSelection,'---');
				// 如果选择数据为空 发送请求 取全部数据
				if(this.multipleSelection == undefined || this.multipleSelection == '') {  
					//total为后端返回数据总条数,直接赋值给当前页面请求条数即可
                    this.form.pagesize = this.pageTotal  
					//this.query为请求需要携带的参数
                    this.query = this.form  
                    //schoollist为封装后的请求
					schoollist(this.query).then(res => {
						that.exportData = res.retData.data;
                        //为循环数据添加一个序号 导出后方便查看
						for(let i in that.exportData){
							that.exportData[i].type = parseInt(i)+1
						}
						const data = that.formatJson(filterVal, that.exportData);
						export_json_to_excel(tHeader, data, '人员历史参赛' + dateUtil.gettime() + '系统导出');//最后一个是表名字
                        //请求完成后将页码归为正常请求值
						that.form.pagesize = 10
					});
				}else {
                    //如果此时复选框有数据,直接导出选中数据即可
					this.exportData = this.multipleSelection
					const data = that.formatJson(filterVal, this.exportData);
					export_json_to_excel(tHeader, data, '人员历史参赛' + dateUtil.gettime() + '系统导出');//最后一个是表名字 
                    //导出完成后,清除复选框数据
					this.$refs.table.clearSelection()
					this.multipleSelection = []
				}

				// console.log('导出数据',this.exportData);
				
				
			}).catch(()=>{})
		},
formatJson(filterVal, jsonData) {   
			return jsonData.map(v => filterVal.map(j => v[j]))    
		},

5.导出万级数据(普通一次性导出失败,需要对请求进行处理)

思路: 和普通导出一样 只不过是将请求分批次发送, 再服务器可接收的范围内即可

        由于等待时间过长,需要加入loading图,此时可以将loading进行封装,方便其他页面使用

5-1 loading组件

可以将其放到公用的文件夹中

<template>
    <div class="loading">
        <div>
            <img class="loadimg" src="../../assets/img/loading.gif" alt="">
            <p class="loadtext">正在导出中,请稍后</p>
        </div>
    </div>
</template>

<script>
export default {
  name: 'Loading' // 定义的组件名称 使用时写法：loading
}
</script>

<style scoped>

.loading {
    /* background: rgba(0,0,0,.3);
    position: fixed;
    top: 70px;
    right: 0;
    width: 83.4%;
    height: 100%;
    padding-top: 18%;
    z-index: 1000; */
    display: flex;
    justify-content: center;
    align-items: center;
    background: rgba(0,0,0,.3);
    position: absolute;
    top: 0;
    right: 0;
    width: 100%;
    height: 100%;
    z-index: 10;
}
.loadimg {
    margin: auto;
    width: 44px;
    display: block;
}
.loadtext {
    line-height: 32px;
    /* color: #2c3e50; */
    color: #FCFCFC;
}
</style>

5-2.当前页面引入loading 

//html
<!-- 加载loading -->
        <div id="loading">
            <Loading ref='loading' v-if="loading"></Loading>
        </div>
//js
	import Loading from '../../common/loading.vue'     //loading图

export default {
		
		components:{
			Loading,
		},
        data() {
			return {
				loading:false,
            }
        }
}

5-3 发起数据请求 导出excel

重复之前步骤

引入需要的插件

//html:
<el-button class="purple el-icon-upload2" @click="exportdownload()">导出</el-button>
//js:
import { export_json_to_excel } from '../../../utils/Export2Excel';
import dateUtil from '../../../utils/dateUtil'
//事件 前提同样是复选表格 所以进行判断
//判断默认全部导出还是选择后部分导出
			exportdownload() {
				let that = this;
				this.$confirm('确定要导出吗？', '提示', {
					type: 'warning'
				}).then(() => {
					//未选择数据 默认导出全部
					if(this.multipleSelection.length == 0) {   
						this.form.pagenum = 0 
                        //数据处理