前端下载文件的方法-blob下载

前端经常会遇到下载文件的需求,后端一般提供的以下两种方法:

  • 文件地址。后端直接提供要下载的文件地址,常用于图片、音视频等静态文件
  • 文件流。后端返回文件流,常用于excel等动态文件

一、a 标签下载

1、直接html使用a标签下载
  • href:文件链接
  • download:下载时的文件名称,相当于重命名了,可以不设置该属性
html 复制代码
<a href="https://example.com/images/a.png" download="b.png">下载</a>
2、通过js方法借用a标签下载
javascript 复制代码
downloadFile(fileurl) {
    let a = document.createElement('a')   // 创建一个a标签
    a.href = fileurl                      // 赋值链接
    a.style.display = 'none'              // 隐藏,设置元素不可见
    document.body.appendChild(a)          // 添加a到页面
    a.click()                             // 模拟点击,进行跳转或下载操作
    document.body.removeChild(a)          // 操作完成,移除a
}

二、window 下载

1、window.location.href
javascript 复制代码
downloadFile(fileurl) {
    window.location.href = fileurl
}
2、window.open
javascript 复制代码
downloadFile(fileurl) {
    window.open(fileurl)
}

注: window.open() 可能会被浏览器拦截器屏蔽,而 window.location.href 不会受到影响

三、blob下载流文件

1、引入axios

javascript 复制代码
import axios from 'axios'

2、blob下载

javascript 复制代码
downloadFile() {
    // 文件地址,可携带参数
    const fileurl = `/file/example/excel/abc?id=${this.id}&appId=${this.appId}`
    // 请求并下载文件,可设置 headers
    axios
       .get(fileurl, {
           responseType: 'blob', // 必须,指定响应的数据类型为二进制数据流(Blob对象)
           headers: {
              'X-Auto-Fp-Plate': 'example',
           },
        })
        .then(response => {
            let url = window.URL.createObjectURL(response.data) // 将二进制文件转化为可访问的url
            let a = document.createElement('a')
            a.href = url
            a.style.display = 'none'
            document.body.appendChild(a)
            // 一般在响应头的 content-disposition 里设置文件名称,下面是提取文件名示例
            const arr = response.headers['content-disposition'].split('filename=')
            const fileName = decodeURI(arr[arr.length - 1])
            a.download = fileName  // 将获取的文件名赋值过去,也可自行赋值
            a.click()
            document.body.removeChild(a)
            window.URL.revokeObjectURL(url) // 释放url
        })
        .catch(error => {
            // do something
        })
    },
相关推荐
摆烂工程师9 分钟前
ChatGPT免费用户可以使用Deep Research啦!并且o3、o4-mini的可使用次数翻倍!
前端·后端·程序员
狂炫一碗大米饭10 分钟前
作为前端你不得不知道的浏览器相关知识1🚀
前端
天天扭码17 分钟前
🔥 别再用 class 了!JS 原型链才是 YYDS
前端·javascript·面试
GISer_Jinger23 分钟前
📢《告别手动抓狂!Trae国际版+BrowserTools MCP 实现前端错误调试自动化》🚀
前端
前端大白话23 分钟前
震惊!90%前端工程师都踩过的坑!computed属性vs methods到底该怎么选?一文揭秘高效开发密码
前端·vue.js·设计模式
一天睡25小时23 分钟前
React与Vue表单的对比差异
前端·javascript
作曲家种太阳24 分钟前
第七章 响应式的 watch 实现【手摸手带你实现一个vue3】
前端
在澳门喝茶的芦竹26 分钟前
React高阶组件——React.momo
javascript·react.js
前端小巷子26 分钟前
深入解析 iframe
前端
WEI_Gaot26 分钟前
ES6 模板字符串
前端·javascript