做导出功能时,能在浏览器直接访问的下载路径是无法在react中直接出现的,所以要经过一番处理。在react处理Excel导出如下,详情见注释:
```
axios.get(url, { responseType: 'arraybuffer' }).then((res) => {
if (res.status === 200) {
const blob = new Blob([res.data], { type: "application/vnd.ms-excel" }); // 创建Blob 对象(存储二进制文件,注意type一定要)
const fileName = "文件名.xls"; // 文件名
const elink = document.createElement('a'); // 创建一个HTML元素
elink.download = fileName; // 给元素添加H5中的download属性
elink.style.display = 'none';
elink.href = URL.createObjectURL(blob); // 利用Blob对象创建URL
document.body.appendChild(elink); // 加入标签
elink.click(); // 点击事件
URL.revokeObjectURL(elink.href); // 释放URL对象
document.body.removeChild(elink) // 移除标签
console.log("导出成功");
}
})
```
注意请求头里面的responseType: 'arraybuffer' 是必须要的。get请求和post请求都可以,但是测试时发现post请求偶尔会出现乱码现象,具体原因未找到,猜测应该是与后台有关,因为换个接口又没有这种情况。
- JS系列
- jQuery和axios的同步请求
- FormData和文件上传
- Http请求参数系列
- 面向对象:JS中的类与继承
- super关键字总结
- import和require语法的报错解决
- 常用的N个JS函数
- ES6新增的Set和Map
- 关于this的学习
- 人人都要会的防抖和节流
- AJAX的简单实现
- Vue
- nuxt
- 在nuxt中引入qrcode或者其他依赖包
- iVew
- 树形控件Tree的render函数
- 自定义组件:Upload封装
- React
- antd自适应高度表格
- 两个常用生命周期函数总结
- antd表格跨行处理(动态数据)
- antd中表单自定义验证踩坑
- Form+Upload实现文件上传全步骤
- 在react中实现Excel导出
- 表格嵌套和子表展开的处理
- 关于表格打印的一点思路
- Select组件中的模糊筛选
- echarts使用与总结
- echarts在react中的使用
- 简单的双层上下钻
- 复杂的多层上下钻(多次请求)
- 复杂的多层上下钻(单次请求)
- Git使用
- git基础一:安装git以及基本命令
- git基础二:add和commit
- 地图API
- 手动绘制点来实现驾车导航
- 地图自定义控件的使用
- 利用自定义标注实现头像展示
- 杂谈与总结
- 谈代码的可读性
- 简单总结判断代码质量的维度
- 3W模型看面向对象
