Vue结合后台导入导出超过问题详解

最近某视频剪辑软件项目中用到了导入导出功能，在网上搜索了一番之后，决定采用一滴方式，这也是大家推荐的一种的方式，特此做下记录。

导出超过功能

这里不谈别人怎么实现的，我是从后台生成了超过流文件返回给前端的。

下面具体看一下后台的代码：

/** * 批量导出用户* @param条件* @param响应*/@发布映射("/export user ")公共void导出用户(@ RequestBody UserQueryCondition条件，HttpServletResponse响应){ XSS工作簿=新XSS工作簿()；请尝试{ ListUserParam list=indexServiCe。导出用户(条件);如果(列表！=空列表。size()0){ XSSFSheet sheet=book。创建工作表(' MySheent ')；字符串[]val={ '用户ID '，'邮箱账号','昵称','年龄','性别','状态', '注册时间'};createExcel(工作表，0，val for(int I=0；我列举。size()；I){用户参数实体=列表。得到(我)；字符串[]值S2=新字符串[]{字符串。(实体)的值。getid())、entity.getEmail()、entity.getName()、String.valueOf(entity.getAge())、entity.getSex()==0？'女':'男，entity.getRemoved()==0？启用':'禁用，实体。GetRegisterDate()}；createExcel(工作表，i 1，val 2)；}书。write(generator response excel('用户列表，响应));}书。close()；}catch(异常e){ e . print stack trace()；}}/** * @param excelName *要生成的文件名字* @返回* @引发IOException */private ServletOutputStream generator response excel(String excelName，HttpServletResponse响应)引发IOException { ExcelName=ExcelName==null | | ' ' .等于(excelName)？excel ' : urlencoder。编码(ExcelName，' UTF-8 ')；回应。setContentType(' application/vnd。ms-excel；charset=utf-8 ')；回应。setheader('内容处理'，'附件；文件名=' excelName ' .xlsx’)；回复回复。getoutputstream()；}对于第一个函数exportUser来说，主要是根据传回来的条件查询数据库并生成相应的超过表格，之后书。write(generator response excel("用户列表",响应));这行代码调用第二个函数generateResponseExcel来生成流文件以及处理返回的回应。

这里需要注意的地方就两个：

回应。setContentType(' application/vnd。ms-excel；charset=utf-8 ')；回应。setheader('内容处理'，'附件；文件名=' excelName ' .xlsx’)；第一行应用程序/vnd.ms-excel说明将结果导出为超过

第二行说明提供那个打开/保存对话框，将文件作为附件下载

上面就是后台的全部代码了，接下来看一下前端的代码：

axios({ method: 'post '，URL : ' http://localhost 336019090/export user '，data: { email: this.email，useridarray 3360 this。useridarray，this.registerStartTime，endregistersated : this。registerendtime }，responseType: ' blob ' }).然后((RES)={控制台。日志(RES)常量链接=文档。创建元素(' a ')让blob=新Blob([res.data]，{ type : '应用程序/vnd。ms-excel ' })；链接。风格。display=' none '链接。href=URL。createobjecturl(blob)；让num=' '代表(让I=0；i 10I){ num=数学。天花板(数学。random()* 10)}链接。setattribute(' download '，'用户_"num ".xlsx’)文档。尸体。appendchild(链接)链接。单击()。文件。尸体。removechild(link)}).捕捉(错误={这个.$Notice.error({ title: '错误，描述： '网络连接错误}) console.log(错误)})这里为了方便做记录，我是直接在页面中使用爱可信发送了个邮政请求。

仔细看爱可信请求加了个响应类型：“斑点”配置，这是很重要的

可以看一下请求成功之后返回的数据：

可以看到请求返回了一个一滴对象，你如果没有正确的加上响应类型：“斑点”这个参数，返回的就不是个一滴对象，而是字符串了。

接下来就是将返回的一滴对象下载下来了：

const link=document . create element(' a ')let Blob=new Blob([RES . data]，{ type : ' application/vnd . ms-excel ' })；link . style . display=' none ' link . href=URL . createobjecturl(blob)；let num='' for(让I=0；i 10I){ num=math . ceil(math . random()* 10)} link . setattribute(' download '，User _' num '。xlsx’)文档。body . appendchild(link)link . click()文档。body.removechild(链接)上面的代码只有一个重要的句子：让blob=new blob ([res.data]，{ type : ' application/vnd . ms-excel '

看看剩下的。

以上就是Vue导出Excel的前后代码。

导入Excel函数

其实导入Excel没什么好说的，就像不用前后分离的时候用SpringMVC导入Excel一样。从Vue前端导入Excel的代码和从Vue上传图片的代码没有区别，就是把Excel文件转移到后台，然后在后台处理文件的逻辑。这不是专门写的，因为和以前没什么区别。

以上就是本文的全部内容。希望对大家的学习有帮助，支持我们。