如何在JavaScript实现Blob文件流下载

 更新时间:2024年05月07日 08:24:16   作者:沈清秋.  
在JavaScript中可以使用浏览器提供的Blob对象和URL.createObjectURL()方法来实现文件流下载,这篇文章主要给大家介绍了关于如何在JavaScript实现Blob文件流下载的相关资料,需要的朋友可以参考下

一、下载

在 JavaScript 中,可以使用浏览器提供的 Blob 对象和 URL.createObjectURL() 方法来实现文件流下载。

下面是一个示例代码,可以帮助了解如何在 JavaScript 中实现文件流下载:

function downloadFile(data, filename, type) {
    // 创建 Blob 对象
    const blob = new Blob([data], { type: type });

    // 判断当前浏览器是否是IE,由于IE是没有download 方法的,需要用msSaveBlob() 或 msSaveOrOpenBlob()
    if (window.navigator && window.navigator.msSaveOrOpenBlob) {
        // 兼容IE
        window.navigator.msSaveOrOpenBlob(blob, filename)
    } else {
        // 创建 URL 对象
        const url = URL.createObjectURL(blob);

        // 创建链接
        const link = document.createElement('a');
        link.href = url;
        link.download = filename;

        // 模拟点击链接进行下载
        document.body.appendChild(link);
        link.click();
        document.body.removeChild(link);

        // 释放 URL 对象
        URL.revokeObjectURL(url);
    }
}

在这个示例中,我们定义了一个 downloadFile() 函数,这个函数接受三个参数:datafilename 和 type。其中,data 表示要下载的数据流,filename 表示要保存的文件名,type 表示要下载的文件类型。

在函数中,我们首先使用 Blob 对象创建一个二进制数据流,然后使用 URL.createObjectURL() 方法创建一个 URL 对象。接着,我们创建一个链接元素,并将这个链接元素的 href 属性设置为 URL 对象的 URL,将 download 属性设置为要保存的文件名。最后,我们模拟点击链接元素,启动下载操作。

当下载完成后,我们需要释放 URL 对象,以便浏览器可以回收这个对象的内存。这个操作可以使用 URL.revokeObjectURL()方法来实现。

注意:IE中要使用window.navigator.msSaveOrOpenBlob 或 window.navigator.msSaveBlob来处理Blob对象
用法:

1.msSaveOrOpenBlob:提供保存和打开按钮

2.msSaveBlob:只提供一个保存按钮

二、请求

在使用axios请求的时候,加上responseType: 'blob'入参。请求示例如下:

axios({
  // 请求头  
  headers: {
      Content-Type: 'application/json;charset=utf-8'  
  },
  responseType: 'blob', // // `responseType` 表示浏览器将要响应的数据类型,选项有'arraybuffer', 'document', 'json', 'text', 'stream',浏览器专属:'blob',默认是'json'
  method: 'get', // 类型根据实际接口是get还是post
  url: '接口URL',
  params: {}, // URL参数
});

因为我们使用的是文件流下载,所以返回的响应对象就不是 json 类型,要换成 blob 类型.

三、示例

以下载excel为例:

axios({
  headers: {
    'Content-Type': 'application/json;charset=utf-8'
  },
  responseType: 'blob',
  method: 'get',
  url: '#',
  params: {}
}).then(res => {
  downloadFile(res, '文件名称','application/xlsx')
})

实际根据请求的方法换成是get请求还是post请求,下载不同的文件对应不同的 Blob 类型,这边excel文件下载用的是 application/xlsx,如果是下载别的类型的文件就换别的类型。

Blob相关的文档可自行查看链接:

https://developer.mozilla.org/zh-CN/docs/Web/API/Blob/type

总结

到此这篇关于如何在JavaScript实现Blob文件流下载的文章就介绍到这了,更多相关JS Blob文件流下载内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • JavaScript字符串常用类使用方法汇总

    JavaScript字符串常用类使用方法汇总

    今天的这篇文章就分享几年以来总结的一些最常见和最有用的字符串相关的方法的例子和简要说明。便于程序员用于快速参考。当然,最有经验的开发人员对这些操作很熟悉,但我认为这是一个很好的方法帮助初学者理解这些函数,他可以帮助你使用简单的语法,完成复杂的操作.
    2015-04-04
  • 全面解析Javascript无限添加QQ好友原理

    全面解析Javascript无限添加QQ好友原理

    这篇文章主要介绍了全面解析Javascript无限添加QQ好友原理的相关资料,非常不错,具有参考借鉴价值,需要的朋友可以参考下
    2016-06-06
  • javascript中style.left和offsetLeft的用法说明

    javascript中style.left和offsetLeft的用法说明

    本篇文章主要是对javascript中style.left和offsetLeft的用法进行了说明介绍,需要的朋友可以过来参考下,希望对大家有所帮助
    2014-03-03
  • 利用JS实现简单的日期选择插件

    利用JS实现简单的日期选择插件

    这篇文章主要介绍了利用JS实现简单的日期选择插件,文中实现两种效果的日期选择,一种是默认参数,点击日期后直接选择该日期,另一种是显示按钮来设置时间,有需要的朋友可以参考借鉴,下面来一起看看吧。
    2017-01-01
  • JS获取当前网页大小以及屏幕分辨率等

    JS获取当前网页大小以及屏幕分辨率等

    这篇文章主要介绍了JS获取当前网页大小以及屏幕分辨率等,方法虽简单,但比较实用,需要的朋友可以参考下
    2014-09-09
  • 第十章之巨幕页头缩略图与警告框组件

    第十章之巨幕页头缩略图与警告框组件

    Bootstrap,来自 Twitter,是目前最受欢迎的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的,它简洁灵活,使得 Web 开发更加快捷。本文给大家介绍BootStrap组件第十章之巨幕页头缩略图和警告框组件 的相关资料,需要的朋友可以参考下
    2016-04-04
  • 如何使用CocosCreator对象池

    如何使用CocosCreator对象池

    这篇文章主要介绍了CocosCreator对象池,对性能有研究的同学,要着重看一下
    2021-04-04
  • 浅析JS给原始数据类型加属性和方法为什么不报错

    浅析JS给原始数据类型加属性和方法为什么不报错

    这篇文章主要想和大家一起探讨一下JavaScript中给原始数据类型添加属性和方法为什么不报错,文中的示例代码讲解详细,感兴趣的小伙伴可以了解下
    2023-11-11
  • 微信小程序自定义弹出模态框禁止底部滚动功能

    微信小程序自定义弹出模态框禁止底部滚动功能

    这篇文章主要介绍了微信小程序自定义弹出模态框禁止底部滚动效果,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2020-03-03
  • Bootstrap教程JS插件弹出框学习笔记分享

    Bootstrap教程JS插件弹出框学习笔记分享

    这篇文章主要为大家分享了Bootstrap教程JS插件弹出框学习笔记,为大家详细介绍Bootstrap弹出框的使用方法,感兴趣的小伙伴们可以参考一下
    2016-05-05

最新评论