JS：Axios文件下载

本例使用vue做前端项目和 express做后端服务

axios的config参数 responseType: 'blob' ,很多地方都提到需要设置，我没有设置也能正常下载

依赖

concurrently 插件来运行命令
nodemon 监控重启 node 后台
cors 处理跨域

a标签下载文件

download(){let href  = "http://localhost:8080/download";const dom = document.createElement('a');dom.style.display = 'none';dom.href = href;document.body.appendChild(dom);//点击下载dom.click();//下载完成移除元素document.body.removeChild(dom);
},

axios下载

async downloadFile(){const res = await axios.get("http://localhost:8080/file");console.log(res);const blob = new Blob([res.data], {type: res.headers['content-type']});let patt = new RegExp("filename=([^;]+\\.[^\\.;]+);*");let result = patt.exec(res.headers['content-disposition']);let filename = decodeURI(result[1]);const downloadElement = document.createElement('a');const href = window.URL.createObjectURL(blob);console.log(filename);downloadElement.style.display = 'none';downloadElement.href = href;downloadElement.download = filename ; //下载后文件名document.body.appendChild(downloadElement);downloadElement.click(); //点击下载document.body.removeChild(downloadElement); //下载完成移除元素window.URL.revokeObjectURL(href); //释放掉blob对象
}

后端服务需要做一些特殊设置

// 设置的文件名，需要对 filename 进行转码，防止下载的文件名中有中文时出现乱码。
res.setHeader("Content-Disposition", "attachment; filename=" + encodeURI(filename));
res.setHeader("Content-Type", 'application/octet-stream');
// axios下载文件取不到content-disposition需要添加响应头
res.setHeader("Access-Control-Expose-Headers", "Content-Disposition");

下载图片

可以直接用img标签加链接就可以显示

<img v-if="imageSrc" :src="data:imageSrc" alt="">

代码文件：https://github.com/mouday/Vue-Demo/tree/main/vue-axios

参考
使用axios如何下载文件
https://blog.csdn.net/shuangmu9768/article/details/108846417

JS：Axios文件下载相关推荐

js多文件下载和多文件分文件夹打包下载并重命名
js多文件下载并重命名 let list=['...'] function downloadFile(list,index){//下载文件方法if(index>=list.length){ret ...
[js] axios为什么可以使用对象和函数两种方式调用？是如何实现的？
[js] axios为什么可以使用对象和函数两种方式调用?是如何实现的? axios 源码初始化看源码第一步,先看package.json.一般都会申明 main 主入口文件. // packag ...
[js] axios拦截器原理是什么？
[js] axios拦截器原理是什么? 拦截器原理其实就是用use添加用户自定义的函数到拦截器的数组中. 最后把他们放在拦截器请求前,请求后.组成promise链式调用. // 组成`Promise` ...
axios获取图片显示_Vue.js+axios图片预览以及上传显示进度
在平时项目开发中,我们经常会对文件做一些上传操作,不仅仅要实现基本需求,也要兼顾用户体验,根据自己在工作中遇到的问题谈谈对图片上传的预览以及上传进度的优化. 1.搭建项目基于Vue.js+axios ...
LiveNVR拉流视频流媒体平台如何解决JS|axios调用接口时遇到的跨域问题
LiveNVR拉流视频流媒体平台如何解决JS|axios调用接口时遇到的跨域问题 1.JS调用遇到跨域解决示例 2.axios请求接口遇到跨域问题 2.1.post请求 2.2.get请求 3.RTS ...
axios java 参数,vue.js axios发请求时,参数包括dto和一个flag, 后台如何接?
1.vue.js使用axios向后台发请求. 传递参数中包含一个object,一个string. object到后台用javaBean接, String到后台用String接. 2.前台代码遇新是直朋 ...
vue-cli+mock.js+axios模拟前后台数据交互
最近工作不是很忙,自己做了一个vue的移动端的小项目,涉及到后台数据的时候,网上查阅了一些资料,因为是自己写的项目没有后台只能自己模拟数据,刚开始就自己写了一些静态数据后来觉得尽量模拟真实的比较好些, ...
JS实现文件下载的几种方法
JS 实现下载功能的几种方法敬你一杯毒鸡汤解解渴: 人生三大真理:暴力真的可以解决一切,帅真的可以当饭吃,有钱真的可以为所欲为. 本文主要讲述的是已知一个文件在服务器的地址(即后端提供的下载接口), ...
js实现文件下载功能
一.a标签下载 <body><button onClick="download()">a标签下载</button><script>f ...

JS：Axios文件下载

a标签下载文件

axios下载

下载图片

JS：Axios文件下载相关推荐

最新文章

热门文章