使用Blob实现前端下载

最新推荐文章于 2024-05-07 03:41:49 发布

置顶壳子i

最新推荐文章于 2024-05-07 03:41:49 发布

阅读量642

点赞数 1

分类专栏： js 文章标签： js javascript html5

本文链接：https://blog.csdn.net/weixin_45412353/article/details/109710708

版权

js 专栏收录该内容

17 篇文章 0 订阅

订阅专栏

本章我们来说一下前端如何实现向用户发起下载请求。

我们需要发起下载请求，那么肯定需要将给用户下载的内容一定是个二进制的形式，然后我们还需要一个url，我们会分别用到以下两个api
Blob
URL.createObjectURL

一、Blob

一个 Blob对象表示一个不可变的, 原始数据的类似文件对象。Blob表示的数据不一定是一个JavaScript原生格式。 File 接口基于Blob，继承 blob功能并将其扩展为支持用户系统上的文件
通俗的说，Blob就是h5提供的一个用于操作流的api

1、Blob()构造函数

let aBlob = new Blob( array, options );

array：接收ArrayBuffer, ArrayBufferView, Blob, DOMString 等对象构成的 Array
options: 配置对象可配置type,endings

type: 它代表了将会被放入到blob中的数组内容的 MIME 类型。
endings: 用于指定包含行结束符\n的字符串如何被写入。它是以下两个值中的一个： “native”，代表行结束符会被更改为适合宿主操作系统文件系统的换行符，或者 “transparent”，代表会保持blob中保存的结束符不变

2、Blob.prototype.slice()

返回一个新的 Blob 对象，包含了源 Blob 对象中指定范围内的数据。

3、Blob.prototype.stream()

返回一个能读取blob内容的 ReadableStream。

4、Blob.prototype.text()

返回一个promise且包含blob所有内容的UTF-8格式的 USVString。

5、Blob.prototype.arrayBuffer()

返回一个promise且包含blob所有内容的二进制格式的 ArrayBuffer

6、Blob对象的属性

size：Blob 对象中所包含数据的大小（字节）。
type：一个字符串，表明该 Blob 对象所包含数据的 MIME 类型。如果类型未知，则该值为空字符串。

二、URL.createObjectURL()

URL.createObjectURL(Blob / File / MediaSource)：返回一个指向传入流的URL

在这里插入图片描述

三、实现文件下载

<!DOCTYPE html>
<html lang="en">

<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <meta http-equiv="X-UA-Compatible" content="ie=edge">
   <title>Document</title>
</head>

<body>
   <button id="btn">点击下载</button>
   <script>
   	let data = "hello word!!!"

   	let btn = document.querySelector("#btn");

   	btn.onclick = function () {
   		downLoad(data,"helloword.txt")
   	}

   	function downLoad(data, filename) {
   		if (!(data instanceof Array)) data = [data]
   		// 创建一个 blob 对象, 通过blob对象获取一个URL
   		const blob = new Blob(data),
   			url = URL.createObjectURL(blob);

   		// 创建一个 A 标签
   		const a = document.createElement('a')
   		// 设置下载的文件名 必要，如果没有就不会下载文件，而是当成链接跳转
   		a.download = filename
   		// 将 A 标签 和URL关联上
   		a.href = url
   		// 不让我们创建的标签影响页面展现
   		a.style.display = "none"
   		// 添加标签
   		document.body.appendChild(a)
   		// 触发 A 标签的点击
   		a.click()
   		// 将标签从元素上移除
   		a.remove()
   		a = null
   	}


   </script>
</body>
</html>

在这里插入图片描述

代码已经写了注释了，作者就不再解释了，好了，下课。

壳子i

关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
使用Blob实现前端下载

需要实现前端下载我们首先需要知道一下两个apiBlobURL.createObjectURL一、Blob一个 Blob对象表示一个不可变的, 原始数据的类似文件对象。Blob表示的数据不一定是一个JavaScript原生格式。 File 接口基于Blob，继承 blob功能并将其扩展为支持用户系统上的文件通俗的说，Blob就是h5提供的一个用于操作流的api1、Blob()构造函数let aBlob = new Blob( array, options );array：...
复制链接

扫一扫