axios下载csv文件下载-功能实现

这篇具有很好参考价值的文章主要介绍了axios下载csv文件下载-功能实现。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

须将axios 配置中的responseType设置为arraybuffer

axios下载csv文件下载-功能实现,Vue,网络,vue.js,前端,javascript,axios,原力计划

 axios下载csv文件下载-功能实现,Vue,网络,vue.js,前端,javascript,axios,原力计划文章来源地址https://www.toymoban.com/news/detail-745424.html

text/comma-separated-values,  
text/csv,  
application/csv, 
application/excel, 
application/vnd.ms-excel, 
application/vnd.msexcel
// 下载文件
async exportConsumeList() {
  try {
	let res = await exportConsumeList()
	var blob = new Blob([res], {
	  type: 'text/csv,charset=UTF-8',
	})
	if ('download' in document.createElement('a')){
	// 非IE下载
		var downloadElement = document.createElement('a')
		var href = window.URL.createObjectURL(blob) //创建下载的链接
		downloadElement.href = href
		downloadElement.download = '用户数据.csv' //下载后文件名
		document.body.appendChild(downloadElement)
		downloadElement.click() //点击下载
		document.body.removeChild(downloadElement) //下载完成移除元素
		window.URL.revokeObjectURL(href) //释放掉blob对象
	}else {
		// IE10+下载
		navigator.msSaveBlob(blob, fileName);
	}
  } catch (error) {
	console.log(error)
  }
},

到了这里,关于axios下载csv文件下载-功能实现的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • SpringBoot整合hdfs,实现文件上传下载删除与批量删除,以及vue前端发送请求,实现前后端交互功能;

    部分工具类代码参考文章:https://blog.csdn.net/qq_27242695/article/details/119683823 前端实现效果 HDFSController HDFS FileInterface (文件接口) HDFS FileImplService (文件接口实现类) HDFSConfig(从yaml读取文件) HDFSUTils 前端vue代码:

    2024年02月16日
    浏览(84)
  • vue3文件下载功能

    定义方法: utils.js 使用 test.vue

    2024年02月12日
    浏览(39)
  • Vue2-文件上传、下载场景功能

    在项目开发中,上传文件的应用场景非常的多,一般情况下,上传的接口都是由公司内部自己开发一套适用于任何场景都可以使用的接口,但是这意味着该接口所涉及到的工作量与技术点就非常的多,且不稳定。于是大公司选择了前者自己研发,小公司则选择了性价比更高的

    2024年02月07日
    浏览(50)
  • 前端实现文件下载功能——文件流

    前端下载文件一般使用的是blob 核心的步骤是获取后端响应的文件流,用blob创建一个临时的URL,然后创建一个隐藏的a标签,实现下载需求。 那就先上代码 如果后端响应的数据是一个二进制数据,那我们就得这是响应类型是blob,否则浏览器会默认按照json解析 至于后端如何向

    2024年02月11日
    浏览(51)
  • 【Java实战】Feign调用文件下载服务接口实现文件下载功能

    最近需要实现Feign调用服务提供者的文件下载接口,进行文件下载功能,这里对功能的实现做一个简单的记录 通过调用服务提供者的文件下载接口,将文件传输的流数据通过 feign.Response 来接收,服务消费者再将数据转化 首先,在项目中引入Feign的依赖。你可以使用Maven进行管

    2024年02月12日
    浏览(79)
  • ajax实现下载文件功能

    最近在做下载功能,因为后端需要生成PDF并上传到云服务器,只返回文件的URL,所以百度了很多找到了一个简单的方法. Blob(Binary Large Object)表示二进制类型的大对象。在数据库管理系统中,将二进制数据存储为一个单一个体的集合。Blob 通常是影像、声音或多媒体文件。在 Ja

    2024年02月15日
    浏览(33)
  • flask项目中 实现下载文件功能

    file_path 变量中提供要下载的文件的路径。 当访问 download 路由时,会触发 download_file 函数,该函数使用 send_file 方法将文件发送到客户端以进行下载 as_attachment=True 表示将文件作为附件下载,而不是在浏览器中直接打开。

    2024年02月07日
    浏览(53)
  • 前端实现流文件下载、导出功能解决方案

    1、封装下载方法(可以通过挂载在vue实例上成为全局函数) 2、调用下载方法 ·1、处理响应拦截器返回的数据,将文件名暴露暴露出去 2、封装下载方法 3、调用下载方法 问题一:后端返回的数据无法解析 在请求函数中添加响应类型以及响应头 问题二、后端返回的文件名经

    2024年04月23日
    浏览(34)
  • 前端发送请求获取后端文件,并且前端实现下载文件功能

    最近遇到一个需求,就是前端发送post请求获取后端的excel文件,并且前端实现下载导出到本地的功能。 前端页面就长上面那样,一个批量导出功能,用户勾选之后,前端通过接口把id和其他的参数传给后端,接口调用方法这里需要注意的是,这里必须设置responseType: ‘blob’

    2024年02月09日
    浏览(45)
  • 【SpringMVC】| 使用SpringMVC实现文件上传 | 下载功能

    SpringMVC是一个Web框架,提供了许多有用的功能,包括文件上传和下载。通过SpringMVC上传和下载文件,您可以允许用户上传文件,以便将它们存储在服务器上,或者允许用户从服务器上下载文件。这些都可以为您的应用程序添加有用的功能,例如: 允许用户上传和共享文件 -

    2024年02月02日
    浏览(44)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包