Excel文件导出，前端导出或者后端导出

一般来讲导出都是后端完成逻辑，给接口给到前端，前端调用接口简单处理导出就可以了，但是上次我们公司做内部使用的后台，认为数据量小，前端导出实时更快，于是也有了前端导出的方式，做个总结。

先过一下后端导出的做法以及需要注意的一些点：

//我是事先封装了一个请求的方法，然后是正常的请求，只是需要注意的是要加一个responseType: 'blob',因为后端返回的就是一个blob类型
export function getDetailExcel (params) {return request({url: '/detailExcel',method: 'get',responseType: 'blob',params})
}getDetailExcel(this.detailExcelQueryData).then(data => {const url = window.URL.createObjectURL(new Blob([data]))const link = document.createElement('a')link.style.display = 'none'link.href = urllink.setAttribute('download',`用户数据.xls`)document.body.appendChild(link)link.click()
})

前端导出的话我是通过调用查询接口，拼接数据然后导出：

// 导出数据exportDataFe () {// const tipText = this.textFormat()this.$confirm(`确定导出数据吗？`, '提示', {confirmButt·onText: '确定',cancelButtonText: '取消',closeOnClickModal: false}).then(() => {this.requestTimes = 0this.excelCount = 1this.exportList = []this.exporting = trueconst query = Object.assign({}, this.exportReuqireData)query.pageIndex = 0query.pageSize = this.requestSizegetWxusers(query).then((res) => {if (res.total <= this.requestSize) {this.exportList = this.formatJson(res.users)this.exportExcel()} else {let total = res.totalif (res.total > this.maxSize) {total = this.maxSizethis.$message({message: '单次最多可下载10万条数据',duration: 5000,type: 'warning'})}// 先判断有多少个文件this.excelCount = Math.ceil(total / this.excelSize)if (this.excelCount > 1) {this.requestTimes = Math.ceil((total - (this.excelCount - 1) * this.excelSize) /this.requestSize)for (let k = 0; k < this.excelCount - 1; k++) {this.combinedData(10, k)}this.combinedData(this.requestTimes, this.excelCount - 1)} else {this.requestTimes = Math.ceil(total / this.requestSize)this.combinedData(this.requestTimes)}}}).catch(() => {this.exporting = false})})},combinedData (requestTimes, fileOrder) {const alOrder = fileOrder || 0let allRequest = []for (var i = 0; i < requestTimes; i++) {const query = Object.assign({}, this.exportReuqireData)query.pageSize = this.requestSizequery.pageIndex = i * query.pageSize + alOrder * this.excelSizeallRequest.push([i, query])}allRequest = allRequest.map((item, index) => {return getWxusers(item[1])})Promise.all(allRequest).then((values) => {values.forEach((item) => {const list = this.formatJson(item.users)this.exportList = this.exportList.concat(list)})let orderif (fileOrder === undefined) {order = 0} else {order = ++fileOrder}this.exportExcel(order)this.excelCount = this.excelCount - 1})},// 下载表格exportExcel (fileOrder) {import('@/vendor/Export2Excel').then((excel) => {// const fileText = this.textFormat()const tHeader = ['Id','手机号','学生姓名','学校名称','学校id','会员等级','会员激活时间','会员到期时间','省份','高中所在学校']const data = this.exportList// const fileName = `AI升学宝用户${fileText}数据` + (fileOrder ? '(' + fileOrder + ')' : '')const fileName =`AI升学宝用户数据` + (fileOrder ? '(' + fileOrder + ')' : '')excel.export_json_to_excel({header: tHeader,data,filename: fileName,autoWidth: true,bookType: 'xlsx'})this.downloadLoading = falsethis.exportList = []this.exporting = falsethis.$message({message: '用户数据已导出',duration: 5000,type: 'success'})})},

Excel文件导出，前端导出或者后端导出相关推荐

vue3采用xlsx库实现上传excel文件，前端解析展示数据（日期转换问题解决）
项目中需要实现点击导入excel文件后前端进行解析,将数据展示在页面上,确认后上传至后台的功能,为了便于用户查看,可将所有已上传至后台的数据重新展示在页面表格中.具体实现步骤如下: 1.下载插件 np ...
django返回excel文件给前端下载
Django使用openpyxl返回excel文件给前端下载虚拟环境导入 pip install openpyxl views.py代码: import datetime from openpyxl ...
导出excel文件到浏览器，swagger测试导出文件名竟然一直乱码
本来就是个很简单的导出xlsx文件到浏览器页面,但是中间写的时候还是遇到了一些问题的. 1.由于导出xlsx文件需要用到HSSFWorkbook,所以需要导入POI依赖 <!-- 导入.导出Ex ...
php 数据导出到excel文件,PHP - 如何将数据动态导出到Excel文件(.xls)？
我使用的是PHP.我想知道如何动态导出数据到Excel文件(.xls).在下面的查询中输入子句中的字段选择我想要在excel文件中看到的内容. $query = "SELECT f.atte ...
python导出数据到excel文件_Python笔记：把数据导出到Excel文件上
相信初学Python数据分析的小伙伴都发现了,只是把数据加载在Python的环境中做数据处理还不够,因为环境的问题(Python加载进来的只是一张虚拟表,数据暂存内存中),我们最终还是需要把粗加工好的 ...
JS将EXCEL文件导入前端第一行未出现或者出现F1F2F3的解决方法……
Excel文件的第一行默认为标题,不做为数据使用,即缺省为HDR=Yes.如果不作为标题,而使用数据,则要在代码中体现为"HDR=NO;". var excelCon; e ...
前端下载excel文件功能的三种方法
1 从后端接收json数据,前端处理生成excel下载 JsonExportExcel的github地址:https://github.com/cuikangjie/JsonExportExcel 这 ...
js导出的xlsx无法打开_vue将数据导出为excel文件就是如此简单
前言: 在以前需要将数据导出为excel文件时,往往需要后端提供支持,后端导出后以文件流的形式进行下载.但也带了一些问题,如: 1. 代码量复杂,一般前端难以完成. 2. 实现数据导出往往会大量消耗服 ...
dbeaver导出excel文件_vue将数据导出为excel文件就是如此简单
前言: 在以前需要将数据导出为excel文件时,往往需要后端提供支持,后端导出后以文件流的形式进行下载.但也带了一些问题,如: 1. 代码量复杂,一般前端难以完成. 2. 实现数据导出往往会大量消耗服 ...
物联网设备数据流转之数据如何导出：Excel文件
背景其实,到现在为止,前面的页面已经实现了对设备数据的展现.这一篇文章中对当前的项目做一个增强: 绘制Echarts 图表展示数据变化趋势: 导出设备数据到Excel,体验TDengine的查询效率 ...

Excel文件导出，前端导出或者后端导出

Excel文件导出，前端导出或者后端导出相关推荐

最新文章

热门文章