点击将数据导出成xls格式,导出成绩等功能

最新推荐文章于 2023-07-05 16:36:08 发布

橘哥哥

最新推荐文章于 2023-07-05 16:36:08 发布

阅读量517

点赞数 1

分类专栏： vue 文章标签：导出功能

本文链接：https://blog.csdn.net/ju__ju/article/details/105579280

版权

vue 专栏收录该内容

42 篇文章 3 订阅

订阅专栏

借鉴了一下他人博客中的东西 =>点击查看.

1.纯前端导出在这里插入图片描述
因为做的是课堂相关的项目,作业状态有已批阅,未批阅,未提交,三个状态,所以数据结构上可能有些问题,这时候需要用些方法,将数据填充成完整的

npm install custom-json2excel   //首先npm 在项目中安装这个包

import Json2excel from 'custom-json2excel' //然后引入到需要使用的vue界面中

exportTask(){   //methods中使用这个方法
     let list =  [  //模拟数据
		   {
		       nickname: "张三"
			total_score: 80
			userId: 37
			cutoff_time: "2020-04-12 00:00:00"
			username: "test0"
		    },{
			uid: "ebef2667462c4cb38a47c4f977e040eb"
			score: 60
			submitTime: "2020-04-02 16:01:18"
			nickname: "李四"
			total_score: 80
			userId: 2260
			cutoff_time: "2020-04-12 00:00:00"
			username: "lisi"
			status: 2
		}
	]
     let data = []    //此处只能使用data作为对象名,不然下面可能不能下载
     list.map(item=>{
         let obj = {
             uid:'',
             status:'',
             username:'',
             userId:'',
             submitTime:'',
             score:0,
             ...item
         }
         data.push(obj)
     })
     const filters = ['uid','status','username','userId']     //过滤掉对象中不需要的属性
     const keyMap = {
         nickname: '姓名',
         score: '成绩',
         total_score: '总分',
         submitTime: '提交时间',
         cutoff_time: '截止日期'
     }
     const json2excel = new Json2excel({ data, keyMap, filters }); 
     json2excel.generate();   
}

效果如下图所示
在这里插入图片描述

8/18日更新
2.调用后端接口导出

//axios.js中写一个方法
axios.getUrl = url => {
    return `${baseUrl}${url}?token=${store.getters.token}`
}

//然后api接口中
/**
 * 通用的导出
 * @param {Sring} mod 模块名称 system、lab、exp、exam...
 * @param {Object} params 参数
 */
export const exportExcel = (mod, params = {}) => {
        console.log(`${getUrl(`/api/${mod}/export`)}${formatParam(params)}`)
        window.location.href = `${getUrl(`/api/${mod}/export`)}${formatParam(params)}`;
}

打印结果如下
跳转到该链接,即可下载该文件,实际是后端生成的文件,所以前端用window.location.href跳转
在这里插入图片描述