axios文件下载!!!!
前端
download(){
debugger;
this.loading = true;
axios.post('http://localhost:8081/brand_case/dao.do?method=export',this.queryParams,{
responseType: 'blob'
}).then( res=>{
console.log('res', res)
// var data = res.data.data;
// 截取文件名,这里是后端返回了文件名+后缀,如果没有可以自己拼接
// 切割出文件名
const fileNameEncode = res.headers['content-disposition'].split('filename=')[1]
/// 解码
const fileName = decodeURIComponent(fileNameEncode)
console.log('fileName', fileName)
// 设置type类型
const blob = new Blob([res.data], {
type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet; application/octet-stream'
})
const fileUrl = window.URL.createObjectURL(blob)
let a = document.createElement("a");
a.href = fileUrl
console.log('url', fileUrl)
a.setAttribute('download', fileName)
a.style.display = 'none'
a.click()
a.remove()
this.loading = false;
}
)
}
}
后端---模板
package com.itheima.pojo;
import com.alibaba.excel.annotation.ExcelProperty;
import com.alibaba.excel.annotation.write.style.ColumnWidth;
import com.alibaba.excel.annotation.write.style.ContentRowHeight;
import com.alibaba.excel.annotation.write.style.HeadRowHeight;
import lombok.AllArgsConstructor;
import lombok.Builder;
import lombok.Data;
import lombok.NoArgsConstructor;
import java.util.Date;
@NoArgsConstructor
@AllArgsConstructor
@Data
@Builder
@HeadRowHeight(value = 30)
@ContentRowHeight(value = 25)
@ColumnWidth(value = 30)
public class UserExcel {
@ExcelProperty(value = "用户编号")
private Integer userId;
@ExcelProperty(value = "姓名")
private String username;
@ExcelProperty(value = "性别")
private String gender;
@ExcelProperty(value = "工资")
private Double salary;
@ExcelProperty(value = "入职时间")
private Date hireDate;
}
controller
// 设置响应头
resp.setContentType("application/vnd.ms-excel");
resp.setCharacterEncoding("utf-8");
// 设置防止中文名乱码
String filename = URLEncoder.encode("员工信息", "utf-8");
// 文件下载方式(附件下载还是在当前浏览器打开)
resp.setHeader("Content-disposition", "attachment;filename=" +
filename + ".xlsx");
// 构建写入到excel文件的数据
List<UserExcel> userExcels = new ArrayList<>();
UserExcel userExce1 = new UserExcel(1001, "张三", "男", 1333.33,
new Date());
UserExcel userExce2 = new UserExcel(1002, "李四", "男", 1356.83,
new Date());
UserExcel userExce3 = new UserExcel(1003, "王五", "男", 1883.66,
new Date());
UserExcel userExce4 = new UserExcel(1004, "赵六", "男", 1393.39,
new Date());
userExcels.add(userExce1);
userExcels.add(userExce2);
userExcels.add(userExce3);
userExcels.add(userExce4);
// 写入数据到excel
EasyExcel.write(resp.getOutputStream(), SysOperLog.class)
.sheet("用户信息")
.doWrite(logQuery);
axios文件下载!!!!的更多相关文章
- axios 文件下载代码 片段
<script type="text/javascript"> axios({ method:'post', url: 'url', // 最好qs.stringify ...
- Spring boot + Vue axios 文件下载
后端代码: @GetMapping("/{sn}") @ApiOperation(value = "获取文件",notes = "获取文件" ...
- vuede axios文件下载
this.loading = true; this.$http({ baseURL: CLOUD_BASE_SERVER_URL, url: '/audit/auditRun/ex ...
- vue+axios实现文件下载
功能:点击导出按钮,提交请求,下载excel文件: 第一步:跟后端童鞋确认交付的接口的response header设置了 axios({ method: 'post', url: 'api/user ...
- vue+axios+springboot文件下载
//前台代码 <el-button size="medium" type="primary" @click="downloadFile" ...
- 【问题解决】Axios调用文件下载获取不到文件名
问题描述 自己开发了一个后端下载文件的接口,然后通过浏览器直接访问这个接口,浏览器能正确得到文件名并下载: 而使用Axios时发现获取不到,经过打印响应体发现响应头里没有文件名 而Java后端代码里是 ...
- 使用Typescript重构axios(二十五)——文件上传下载进度监控
0. 系列文章 1.使用Typescript重构axios(一)--写在最前面 2.使用Typescript重构axios(二)--项目起手,跑通流程 3.使用Typescript重构axios(三) ...
- 基于Vue + axios + WebApi + NPOI导出Excel文件
一.前言 项目中前端采用的Element UI 框架, 远程数据请求,使用的是axios,后端接口框架采用的asp.net webapi,数据导出成Excel采用NPOI组件.其业务场景,主要是列表页 ...
- vue+iview 通过a标签实现文件下载
vue+iview 通过a标签实现文件下载 方法一: 注意: 如果下载的文件放在本地目录下,一定要将模板文件放到 public 目录下,否则由于权限问题找不到文件 路径: 项目更目录-->pub ...
- vue+axios+elementUI文件上传与下载
vue+axios+elementUI文件上传与下载 Simple_Learn 关注 0.5 2018.05.30 10:20 字数 209 阅读 15111评论 4喜欢 6 1.文件上传 这里主要 ...
随机推荐
- MMDetection中模型的Checkpoints下载
mmdetection中的模型checkpoints是需要自己手动下载的,下载步骤如下: 打开mmdetection, 进入configs目录,可以看到这里面有很多以目标检测模型命名的文件夹,选择你想 ...
- Linux命令之定时调度-crontab
以上cron命令格式为:* * * * * [root run-parts] command 前面五个*号代表时间,用数字,数字的取值范围和含义如下: 第一个*:分钟 (0-59)[整数] 第二个*: ...
- Windows10安装UR_RTDE
------------恢复内容开始------------ 要使用UR_RTDE必须先配置电脑环境,目前使用的环境是电脑win10,配置环境需要VS2019+boost1_66_0+cmake2.3 ...
- vim的visual模式和列编辑
有三种方式进入visual模式: 1> 在普通模式下输入v(小写),底部提示信息为VISUAL,编辑粒度为字符 通过方向键或者HJKL调整选择的字符范围. 输入d,删除选中字符: 输入y,复制当 ...
- 博弈论练习8 Northcott Game(取石子问题)
题目链接在这里:I-Northcott Game_牛客竞赛博弈专题班组合游戏基本概念.对抗搜索.Bash游戏.Nim游戏习题 (nowcoder.com) 这题是一个伪装的很好的取石子问题,可以发现, ...
- HTML笔记(二) HTML标签元素
一 常用的头部元素标签 <head>元素包含了所有的头部标签元素. 1.<title> <title>标签定义了HTML文档的标题,在HTML/XHTML文档中是必 ...
- C#截取字符串的方法
#region 得到字符串的长度 /// <summary> /// 得到字符串的长度 /// </summary> /// <param nam ...
- Glist 按钮属性
grayed 变灰与否不影响点击等事件 touchable 为false,不会变灰,但会无法点击, enabled为false自动变灰,且无法点击
- keras图片数字识别入门AI机器学习
通过使用mnist(AI界的helloworld)手写数字模型训练集,了解下AI工作的基本流程. 本例子,要基于mnist数据集(该数据集包含了[0-9]的模型训练数据集和测试数据集)来完成一个手写数 ...
- 个人数据保全计划:(2) NAS基础知识
前言 距离去年国庆入手了NAS至今有好几个月时间了,NAS折腾起来有点麻烦,且实际作用因人而异,并没有想象中的好用,所以说好的这个系列一直没有更新~ 还有另一方面的原因,这些NAS的系统基于Linux ...