如何在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文件流下载内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • js面向对象之静态方法和静态属性实例分析

    js面向对象之静态方法和静态属性实例分析

    这篇文章主要介绍了js面向对象之静态方法和静态属性,实例分析了静态方法和静态属性的原理及应用,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-01-01
  • Script的加载方法小结

    Script的加载方法小结

    对动态加载脚本,需要重点关注的一个问题是,所动态加载的JS脚本的接口依赖问题。
    2011-01-01
  • 微信小程序实现水平时间轴

    微信小程序实现水平时间轴

    这篇文章主要为大家详细介绍了微信小程序实现水平时间轴,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-05-05
  • javascript 数据结构的题

    javascript 数据结构的题

    面试题是3个数据结构的题,可以用java/c/c++/python实现,靠,js也能实现,鄙视js?我上机就用js写的,虽说肯定没戏,但js我挺。
    2008-07-07
  • layui加载数据显示loading加载完成loading消失的实例代码

    layui加载数据显示loading加载完成loading消失的实例代码

    今天小编就为大家分享一篇layui加载数据显示loading加载完成loading消失的实例代码,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2019-09-09
  • JavaScript JSON数据处理全集(小结)

    JavaScript JSON数据处理全集(小结)

    这篇文章主要介绍了JavaScript JSON数据处理全集,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-08-08
  • js利用clipboardData实现截屏粘贴功能

    js利用clipboardData实现截屏粘贴功能

    这篇文章主要为大家详细介绍了js利用clipboardData实现截屏粘贴功能,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2016-10-10
  • PHP 502bad gateway原因及解决方案

    PHP 502bad gateway原因及解决方案

    这篇文章主要介绍了PHP 502bad gateway原因及解决方案,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2020-11-11
  • JavaScript遍历DOM元素的常见方式示例

    JavaScript遍历DOM元素的常见方式示例

    这篇文章主要介绍了JavaScript遍历DOM元素的常见方式,涉及javascript中firstChild、lastChild、firstElementChild、nextElementSibling等函数遍历dom元素相关使用技巧,需要的朋友可以参考下
    2019-02-02

最新评论