广告
返回顶部
首页 > 资讯 > 前端开发 > JavaScript >vue中如何下载excel流文件及设置下载文件名
  • 219
分享到

vue中如何下载excel流文件及设置下载文件名

2024-04-02 19:04:59 219人浏览 独家记忆
摘要

目录概述1、通过 url 下载2、通过 a 标签 download 属性结合 blob 构造函数下载3、通过 js-file-download 插件概述 导出excel需求,当点击下

概述

导出excel需求,当点击下载模板或下载反馈结果,axiOS发起后端接口请求,返回的数据获取 response 时出现乱码,如图:

总结如下几种处理方法。

1、通过 url 下载

即后端提供文件的地址,直接使用浏览器去下载

通过window.location.href = 文件路径下载


window.location.href = `${location.origin}/operation/ruleImport/template`

通过 window.open(url, '_blank')


window.open(`${location.origin}/operation/ruleImport/template`)

这两种使用方法的不同:

  • window.location:当前页跳转,也就是重新定位当前页;只能在网站中打开本网站的网页。
  • window.open:在新窗口中打开链接;可以在网站上打开另外一个网站的地址。

2、通过 a 标签 download 属性结合 blob 构造函数下载

a 标签的 download 属性是 HTML5 标准新增的,作用是触发浏览器的下载操作而不是导航到下载的 url,这个属性可以设置下载时使用新的文件名称。

前端创建超链接,接收后端的文件流:


axios.get(`/operation/ruleImport/template`, {
        responseType: "blob" //服务器响应的数据类型,可以是 'arraybuffer', 'blob', 'document', 'JSON', 'text', 'stream',默认是'json'
    })
    .then(res => 
        if(!res) return
        const blob = new Blob([res.data], { type: 'application/vnd.ms-excel' }) // 构造一个blob对象来处理数据,并设置文件类型
        
        if (window.navigator.msSaveOrOpenBlob) { //兼容IE10
            navigator.msSaveBlob(blob, this.filename)
        } else {
            const href = URL.createObjectURL(blob) //创建新的URL表示指定的blob对象
            const a = document.createElement('a') //创建a标签
            a.style.display = 'none'
            a.href = href // 指定下载链接
            a.download = this.filename //指定下载文件名
            a.click() //触发下载
            URL.revokeObjectURL(a.href) //释放URL对象
        }
        // 这里也可以不创建a链接,直接window.open(href)也能下载
    })
    .catch(err => {
        console.log(err)
    })

注:请求后台接口时要在请求头上加{responseType: 'blob'};download 设置文件名时,可以直接设置扩展名,如果没有设置浏览器将自动检测正确的文件扩展名并添加到文件。

3、通过 js-file-download 插件

安装:


npm install js-file-download --S

使用


import fileDownload from 'js-file-download'

axios.get(`/operation/ruleImport/template`, {
        responseType: 'blob' //返回的数据类型
    })
    .then(res => {
        fileDownload(res.data, this.fileName)
    })

以上就是Vue中如何下载excel流文件及设置下载文件名的详细内容,更多关于vue中下载excel流文件及设置下载文件名的资料请关注编程网其它相关文章!

--结束END--

本文标题: vue中如何下载excel流文件及设置下载文件名

本文链接: https://www.lsjlt.com/news/125686.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑,方便收藏和打印~

下载Word文档
猜你喜欢
  • vue中如何下载excel流文件及设置下载文件名
    目录概述1、通过 url 下载2、通过 a 标签 download 属性结合 blob 构造函数下载3、通过 js-file-download 插件概述 导出excel需求,当点击下...
    99+
    2022-11-12
  • vue中怎么下载excel流文件及设置下载文件名
    这篇文章给大家分享的是有关vue中怎么下载excel流文件及设置下载文件名的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。概述导出excel需求,当点击下载模板或下载反馈结果,axios发起后端接口请求,返回的数据...
    99+
    2023-06-15
  • java文件下载如何设置中文名称
    这篇文章主要为大家展示了“java文件下载如何设置中文名称”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“java文件下载如何设置中文名称”这篇文章吧。实例如下:protected vo...
    99+
    2023-05-30
    java
  • vue下载文件以及文件重命名方式
    目录vue下载文件及文件重命名vue项目如何改名vue下载文件及文件重命名 http Content-type对照表大家自行百度 export function downFile(...
    99+
    2022-11-13
    vue下载文件 vue文件重命名 vue文件命名
  • excel下载后文件名称不对
    正确写法 String headerValue = String.format("attachment; filename=\"%s\";", fileName+ "_" + dateStr + ".xlsx");// 这样就可以了 ...
    99+
    2023-08-30
    excel java
  • Java下载excel文件名中文乱码解决
    我是一名充满激情的程序员,💻希望和大家一起学习进步!我热爱编程,对技术充满好奇心和求知欲! 🗣️无论你是新手还是老手,都能从我的博客中获得有价值的内容! Ὠ...
    99+
    2023-09-10
    java excel python spring
  • java文件下载中文文件名乱码
    JAVA文件下载时中文文件名乱码有两种情况:下载时中文文件名乱码;下载时因为路径中包含中文文件名乱码,提示找不到文件。相关视频教程分享:java视频教程解决方法如下:response.setContentType("multipart/fo...
    99+
    2021-10-07
    java教程 java 文件 下载 中文 文件名 乱码
  • java下载文件中文文件名乱码
    问题引出:上传中文命名的图片,下载显示不了中文名称。如图:(相关视频教程推荐:java视频教程)解决方法:sping-mvc.xml部分代码: FileController.java中文文件名获取代码:获取浏...
    99+
    2014-05-25
    java教程 java 下载 文件 中文 文件名 乱码
  • 前端axios如何下载excel文件
    小编给大家分享一下前端axios如何下载excel文件,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!需求:通过后端接口下载exc...
    99+
    2022-10-19
  • vue下载文件及文件重命名的方法是什么
    这篇文章主要介绍“vue下载文件及文件重命名的方法是什么”,在日常操作中,相信很多人在vue下载文件及文件重命名的方法是什么问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”vue下载文件及文件重命名的方法是什么...
    99+
    2023-07-04
  • js如何实现文件流式下载文件
    在JavaScript中,可以使用Blob对象和URL.createObjectURL()方法来实现文件的流式下载。具体步骤如下:1...
    99+
    2023-08-09
    js
  • vue element中axios如何下载文件
    这篇文章给大家分享的是有关vue element中axios如何下载文件的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。•axios 接受文件流,需要设置 {responseTyp...
    99+
    2022-10-19
  • java中文件下载及文件名乱码问题总结
    关于java文件下载文件名乱码问题解决方案:(相关学习课程:java视频教程)String fileName = "下载的文件名"; String userAgent = request.getHeader("User-Agent"); ...
    99+
    2021-10-03
    java 文件 乱码
  • vue如何使用文件流进行下载(newBlob)
    目录vue使用文件流进行下载(new Blob)封装方法vue下载文件流完整前后端代码vue使用文件流进行下载(new Blob) 封装方法 function getExel(url...
    99+
    2022-11-13
  • js中怎么用文件流下载csv文件
    这篇文章主要讲解了“js中怎么用文件流下载csv文件”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“js中怎么用文件流下载csv文件”吧!js使用文件流下载csv文件的实现方法理解 Blob ...
    99+
    2023-07-05
  • php文件下载文件名乱码如何解决
    本篇内容主要讲解“php文件下载文件名乱码如何解决”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“php文件下载文件名乱码如何解决”吧!php文件下载文件名乱码的解决办法:1、把“Content-...
    99+
    2023-07-04
  • vue下载excel文件的四种方法实例
    目录1、通过url下载2、通过 a 标签 download 属性结合 blob 构造函数下载3、通过 js-file-download 插件 4、使用fetch下载总结1、...
    99+
    2022-11-13
  • springboot中Excel文件下载踩坑大全
    目录项目场景:Spring boot文件下载问题一:下载的文件名称出现中文乱码的问题问题二:在swagger中测试下载接口,点击下载的文件,发现文件名是乱码的问题问题四:开发环境下载...
    99+
    2022-11-12
  • response.setHeader设置下载文件名无效怎么解决
    这篇文章主要讲解了“response.setHeader设置下载文件名无效怎么解决”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“response.setHeader设置下载文件名无效怎么解决...
    99+
    2023-06-29
  • 一文详解js如何用文件流下载csv文件
    本篇文章给大家带来了关于js+csv的相关知识,其中主要介绍了什么是Blob对象,怎么理解它以及如何使用文件流实现下载csv文件,感兴趣的朋友,下面一起来看一下吧,希望对大家有帮助。js使用文件流下载csv文件的实现方法理解 Blob 对象...
    99+
    2023-05-14
    javascript csv
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作