前端

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文件下载!!!!的更多相关文章

  1. axios 文件下载代码 片段

    <script type="text/javascript"> axios({ method:'post', url: 'url', // 最好qs.stringify ...

  2. Spring boot + Vue axios 文件下载

    后端代码: @GetMapping("/{sn}") @ApiOperation(value = "获取文件",notes = "获取文件" ...

  3. vuede axios文件下载

    this.loading = true; this.$http({ baseURL: CLOUD_BASE_SERVER_URL,           url: '/audit/auditRun/ex ...

  4. vue+axios实现文件下载

    功能:点击导出按钮,提交请求,下载excel文件: 第一步:跟后端童鞋确认交付的接口的response header设置了 axios({ method: 'post', url: 'api/user ...

  5. vue+axios+springboot文件下载

    //前台代码 <el-button size="medium" type="primary" @click="downloadFile" ...

  6. 【问题解决】Axios调用文件下载获取不到文件名

    问题描述 自己开发了一个后端下载文件的接口,然后通过浏览器直接访问这个接口,浏览器能正确得到文件名并下载: 而使用Axios时发现获取不到,经过打印响应体发现响应头里没有文件名 而Java后端代码里是 ...

  7. 使用Typescript重构axios(二十五)——文件上传下载进度监控

    0. 系列文章 1.使用Typescript重构axios(一)--写在最前面 2.使用Typescript重构axios(二)--项目起手,跑通流程 3.使用Typescript重构axios(三) ...

  8. 基于Vue + axios + WebApi + NPOI导出Excel文件

    一.前言 项目中前端采用的Element UI 框架, 远程数据请求,使用的是axios,后端接口框架采用的asp.net webapi,数据导出成Excel采用NPOI组件.其业务场景,主要是列表页 ...

  9. vue+iview 通过a标签实现文件下载

    vue+iview 通过a标签实现文件下载 方法一: 注意: 如果下载的文件放在本地目录下,一定要将模板文件放到 public 目录下,否则由于权限问题找不到文件 路径: 项目更目录-->pub ...

  10. vue+axios+elementUI文件上传与下载

    vue+axios+elementUI文件上传与下载 Simple_Learn 关注  0.5 2018.05.30 10:20 字数 209 阅读 15111评论 4喜欢 6 1.文件上传 这里主要 ...

随机推荐

  1. [C++] epoll server实例

    // IO多路复用,事件驱动+非阻塞,实现一个线程完成对多个fd的监控和响应,提升CPU利用率 // epoll优点: // 1.select需要每次调用select时拷贝fd,epoll_ctl拷贝 ...

  2. 【NAS使用心得】使用Synology Photos管理照片

    整理方式 1.本地没有整理或只按年份整理的:时间线模式下直接上传,让软件自己按照片创建时间生成文件夹:有按年份生成相册需求的,可以用"选择照片以创建相册"功能,找到年份文件夹,全选 ...

  3. 006Java程序运行机制

    006Java程序运行机制 高级程序语言分为编译型和解释型两种,Java这两种特性都具备. 编译型还是解释型取决于翻译的时机. 以看一本外语书为例: 编译型:先把整本书翻译成中文版再看. 解释型:请个 ...

  4. ASP.NET的MVC模式中分布页和布局页的使用

    大概描述一下,分布页是布局页的一部分,分布页就相当于小图标,布局页就相当于PPT模板,PPT模板可以加入一些小图标(分布页),你只需要改改内容就好,视图创建的时候要选择包含布局页的 首先,去Contr ...

  5. SSH、SFTP、FTP、Telnet、SCP、TFTP协议的原理

    一.SSH协议1.什么是SSH?SSH全称 安全外壳协议(Secure Shell),,是一种加密的网络传输协议,可在不安全的网络中为网络服务提供安全的传输环境. 如果一个用户从本地计算机,使用SSH ...

  6. 智汇成城 ,创赢未来 | AI+产业峰会智慧城市专场在深成功举办!

    11月4日下午,由福田区人才工作局指导,广州英码信息科技有限公司和共达地创新技术(深圳)有限公司联合主办,深圳市人工智能行业协会承办的AI+产业峰会之智慧城市专场活动在深圳市南山区成功举办. &quo ...

  7. U-boot分析之编译体验

    1. 如图可以看到的是PC和嵌入式系统的区别 PC第一步是上电,进入BIOS而嵌入式系统进入bootloader 接着进入操作系统而嵌入式式进入Linux内核 PC识别C盘,D盘,而嵌入式系统则挂载根 ...

  8. Oracle-展示的时候出现????乱码

    Oracle-展示的时候出现????乱码 配置环境变量: NLS_LANG SIMPLIFIED CHINESE_CHINA.ZHS16GBK

  9. Caused by: com.mysql.jdbc.exceptions.jdbc4.MySQLSyntaxErrorException: Table 'hive.DELETEME1643159643943' doesn't exist

    Caused by: com.mysql.jdbc.exceptions.jdbc4.MySQLSyntaxErrorException: Table 'hive.DELETEME1643159643 ...

  10. sql 查询大数据 常用 50列优化

    大数据量的问题是很多面试笔试中经常出现的问题,比如baidu google 腾讯 这样的一些涉及到海量数据的公司经常会问到. 下面的方法是我对海量数据的处理方法进行了一个一般性的总结,当然这些方法可能 ...