blob 图片_js如何下载图片、pdf、mp3等各类多媒体文件

1. 前言

以前下载一个文件，一般就是通过后端提供接口，或者通过window.open来下载，但是随着需求的发展，文件会动态生成或者文件会存放在一个专门的静态服务器上面，这个时候就需要前端直接下载了，通过window.open这种方式已经不能满足了，因为它只是打开一个新的页面，不是真正的下载。

那怎么办尼？

这个是很早之前已经踩过坑了，今天组内正好有人问我如何下载这些多媒体文件，想想还是把源码分享出来吧 ，省的以后人再踩坑

2. 利用a标签的download属性

通过download属性指定下载的名字，然后模拟一个点击事件，我们就可以简单的下载了，代码如下。

function 

实际用的过程会发现，这个方法大部分情况下都会打开一个新的页面，而且有兼容性问题。

https://caniuse.com/#search=download

download 兼容性测试 https://caniuse.com/#search=download

可以看到ie不支持，低版本的ios safari也不行，兼容性问题，下面会说，我们先来解决第一个问题，不是真正的下载，会打开一个新的页面的问题。

3. 利用 Blob对象进行下载

Blob（Binary Large Object）翻译成中文就是大型的二进制对象，不仅仅在js中有，在各种语言中都有，它是一种通用的数据格式，类似json一样，关于具体的作用啥的，可以看看阮一峰写的文章，今天主要提供解决方案。

Blob详解 https://javascript.ruanyifeng.com/htmlapi/file.html

直接上代码吧

// 创建blob对象

这样就可以实现不打开页面的下载了，接下来我们解决兼容性问题

function 

演示地址: https://v4iyl.csb.app/
所有代码 https://codesandbox.io/s/download-blob-v4iyl

4. 备注（遇到的坑）

4.1 如果项目中的fetch库是第三方的，比如说Axios，那只需要修改或者downloadBlob方法就好了，比如像下面这样

function 

4.2 如果下载的是pdf格式，那就需要修改下requestConfig

function 

好了，基本上这样吧，有什么问题，留言给我！

发现大家都是收藏党，为啥不点赞，好奇怪，如果用的上，记得点赞呀