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

 更新时间:2021年05月12日 09:27:57   作者:sugar_coffee  
这篇文章主要介绍了vue中如何下载excel流文件及设置下载文件名,对vue感兴趣的同学,可以参考下

概述

导出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流文件及设置下载文件名的资料请关注脚本之家其它相关文章!

相关文章

  • 通过Element ui往页面上加一个分页导航条的方法

    通过Element ui往页面上加一个分页导航条的方法

    这篇文章主要介绍了通过Element ui往页面上加一个分页导航条的方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2021-05-05
  • vue.js单页面应用实例的简单实现

    vue.js单页面应用实例的简单实现

    本篇文章主要介绍了vue.js单页面应用实例的简单实现,使用单页应用,没有页面切换,就没有白屏阻塞,可以大大提高 H5 的性能,达到接近原生的流畅体验。
    2017-04-04
  • Vue使用mixins实现压缩图片代码

    Vue使用mixins实现压缩图片代码

    本篇文章主要介绍了Vue使用mixins实现压缩图片代码,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-03-03
  • VUE中v-on:click事件中获取当前dom元素的代码

    VUE中v-on:click事件中获取当前dom元素的代码

    这篇文章主要介绍了VUE中v-on:click事件中获取当前dom元素的代码,文中同时给大家提到了v-on:click获取当前事件对象元素的方法,需要的朋友可以参考下
    2018-08-08
  • Vue3之元素和组件的动画切换实现示例详解

    Vue3之元素和组件的动画切换实现示例详解

    这篇文章主要为大家介绍了Vue3之元素和组件的动画切换实现示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-04-04
  • Vue实现穿梭框效果

    Vue实现穿梭框效果

    这篇文章主要为大家详细介绍了Vue实现穿梭框效果,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2020-09-09
  • Vue.js实现价格计算器功能

    Vue.js实现价格计算器功能

    这篇文章主要为大家详细介绍了Vue.js实现价格计算器功能,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-08-08
  • Vue3如何解决路由缓存问题(响应路由参数的变化)

    Vue3如何解决路由缓存问题(响应路由参数的变化)

    这篇文章主要介绍了Vue3如何解决路由缓存问题(响应路由参数的变化),具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-03-03
  • 如何解决Element-ui的el-table固定列后出现的表格错位问题

    如何解决Element-ui的el-table固定列后出现的表格错位问题

    这篇文章主要介绍了如何解决Element-ui的el-table固定列后出现的表格错位问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-09-09
  • Vue不能下载xls以及文件乱码问题解决

    Vue不能下载xls以及文件乱码问题解决

    最近工作中遇到了一些问题,通过查找相关资料终于找到了相关的解决方法,这篇文章主要给大家介绍了关于Vue不能下载xls以及文件乱码问题解决的相关资料,需要的朋友可以参考下
    2022-04-04

最新评论