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

相关文章

  • Vue3初探之ref、reactive以及改变数组的值

    Vue3初探之ref、reactive以及改变数组的值

    在setup函数中,可以使用ref函数和reactive函数来创建响应式数据,下面这篇文章主要给大家介绍了关于Vue3初探之ref、reactive以及改变数组值的相关资料,需要的朋友可以参考下
    2022-09-09
  • vue递归实现自定义tree组件

    vue递归实现自定义tree组件

    这篇文章主要为大家详细介绍了vue递归实现自定义tree组件,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-08-08
  • ElementUI中el-input无法输入、修改及删除问题解决办法

    ElementUI中el-input无法输入、修改及删除问题解决办法

    这篇文章主要给大家介绍了关于ElementUI中el-input无法输入、修改及删除问题的解决办法,这种问题产生是因为input在vue中的受控,我们需要去重新改变一下监听和实现,需要的朋友可以参考下
    2023-11-11
  • Vue 中如何使用 el-date-picker 限制只能选择当天、当天之前或当天之后日期的方法详解

    Vue 中如何使用 el-date-picker 限制只能选择当天、当天之前或当天之后日期的方法详解

    在Vue前端开发中,使用 el-date-picker 组件进行日期选择是常见的需求,有时候我们需要限制用户只能选择当天、当天之前或当天之后的日期,本文将详细介绍如何使用 el-date-picker 组件实现这些限制,让你能够轻松应对各种日期选择场景,需要的朋友可以参考下
    2023-09-09
  • Vue如何拖动滑块

    Vue如何拖动滑块

    这篇文章主要介绍了Vue如何拖动滑块问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-07-07
  • vant-ui组件调用Dialog弹窗异步关闭操作

    vant-ui组件调用Dialog弹窗异步关闭操作

    这篇文章主要介绍了vant-ui组件调用Dialog弹窗异步关闭操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2020-11-11
  • 记一次Vue.js混入mixin的使用(分权限管理页面)

    记一次Vue.js混入mixin的使用(分权限管理页面)

    这篇文章主要介绍了记一次Vue.js混入mixin的使用(分权限管理页面),小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2019-04-04
  • vue中使用jwt-decode解析token的方法

    vue中使用jwt-decode解析token的方法

    这篇文章主要介绍了vue中使用jwt-decode解析token,文末给大家补充介绍了vue通过jwt-decode解析token获取需要的数据,本文给大家介绍的非常详细,需要的朋友可以参考下
    2022-06-06
  • 通过一个简单的例子学会vuex与模块化

    通过一个简单的例子学会vuex与模块化

    这篇文章主要给大家介绍了关于如何通过一个简单的例子学会vuex与模块化的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧。
    2017-11-11
  • vite打包出现"default" is not exported by "node_modules/...问题解决

    vite打包出现"default" is not exported by "no

    这篇文章主要给大家介绍了关于vite打包出现"default" is not exported by "node_modules/...问题解决的相关资料,文中通过代码介绍的非常详细,需要的朋友可以参考下
    2023-11-11

最新评论