vue实现导出excel,vue表格导出excel简书

　　这篇文章主要介绍了某视频剪辑软件请求后端接口导出超过表格方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教

vue请求后端接口导出excel

　　项目中遇到一个需求，用户下载文件，会从后端那里请求接口获得数据并下载导出超过表格

　　后端小哥给我返回的是二进制数据流，需要前端自己去处理这些数据

　　如下图，请求接口返回的数据都是乱码

　　这里我们可以在爱可信的请求里添加，这样返回的二进制数据就会被读取为一滴的数据，

　　响应类型：“blob”

　　fetchGet1(url，params) {

　　返回axios({

　　url，

　　方法：“得到”，

　　参数，

　　标题：{

　　标题：{ Content-Type :应用程序/x-下载 }

　　responseType: blob//指明返回格式

　　})

　　}

　　//下载接口

　　导出var下载顺序=(orderId)=Ajax。fetch get 1(`/API/order/excel/$ { orderId } `)

　　当我点击下载订单的按钮后，浏览器就自动弹出下载超过文件一栏了，要注意的是，我的电脑好像没有xlsx格式的文件，所以在定义文件名那里改成了xls的格式

调用后端接口导出excel无效果，直接访问后端url可以

controller层代码

　　@ApiOperation(value=导出模板)

　　@ request mapping(value=/get template ，method=RequestMethod .获取)

　　@ResponseBody

　　公共void get模板(http servlet请求req，http servlet响应res)引发IOException {

　　常设图书服务。获取模板(req，RES)；

　　}

serviceImpl代码

　　公共void get模板(http servlet请求req，http servlet响应res)引发IOException {

　　字符串模板名称=站书模板；

　　字符串exportName=模板

　　excel util。downloadexceltemplate(req，res，templateName，export name)；

　　}

导出模板路径

工具箱代码

　　/**

　　* 下载批量导入模板

　　* @param HttpServletRequest

　　* @param HttpServletResponse

　　* @param templateName execl模板名称

　　* @param exportName导出表单名称

　　* @抛出异常

　　公共静态void downloadExcelTemplate(http servlet request req，HttpServletResponse res，String templateName，

　　字符串exportName)引发IOException{

　　字符串完整文件名=req。getservletcontext().获取真实路径(/doc/import/excel template )；

　　完整文件名=(File.separator templateName .xls’)；

　　字符串导出="";

　　if(datavalidutil。isempty(导出名称)){

　　export=模板名称

　　}否则{

　　export=exportName

　　}

　　字符串用户代理=请求。get标头(“用户代理”)；

　　//文件下载乱码问题

　　if(字符串实用程序。包含(用户代理。toupper case()， MSIE ) string utils。包含(用户代理， Trident ){

　　export=URL编码器。编码(出口， UTF-8 )；

　　}否则{

　　export=新字符串(export。getbytes(“UTF-8”)，“ISO8859-1”)；

　　}

　　//设置内容-处置

　　RES . set标头( Content-disposition ，附件；filename= export .xls’)；

　　//设置文件哑剧类型

　　//RES . set内容类型( application/vnd。ms-excel’)；

　　//前端框架自定义类型

　　资源设置内容类型(应用程序/导出。文件’)；

　　输出流out=RES . get输出流()；

　　file inputstream in=新文件inputstream(完整文件名)；

　　RES . setcharacterencoding(" UTF-8 ")；

　　字节[] b=新字节[1024];

　　int n=-1；

　　while((n=in.read(b))！=-1){

　　out.write(b，0，n)；

　　}

　　英寸close()；

　　出去。close()；

　　}

vue前端写法

　　//模板下载

　　getTemplate(){

　　const那个=这个

　　窗户。location=/test/test/get template ；//正确写法，直接访问你的请求路径

　　//这种写法会导致后台不报错，但是前端无导出效果

　　/*窗口。axios。get(/test/test/get template ，{responseType: arraybuffer}).然后((res)={

　　}).catch((err)={

　　});*/

　　以上个人经历，希望能给大家一个参考，也希望大家多多支持我们。

郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。