createObjectURL详解

createObjectURL详解：https://www.python100.com/html/0K200Q39ZYEO.html

 

createObjectURL详解

更新：2023-05-24 17:20

createObjectURL是JavaScript中一个非常有用的函数，它可以将Blob、File等二进制文件转换为浏览器可以直接显示的URL地址，从而方便进行展示、下载等操作。

一、什么是Blob

Blob（二进制大对象）是几乎所有二进制数据的一种抽象，类似于File对象。Blob表示了一段二进制数据，可以用来存储图片、音频、视频等多媒体文件。我们可以使用Blob构造函数来创建一个Blob对象，如下：

const blob = new Blob(['Hello, World!'], { type: 'text/plain' });

这里我们创建一个包含了"Hello, World!"的文本类型的Blob对象，这个对象可以转换为URL地址供我们使用。

二、createObjectURL的基本用法

创建一个Blob对象后，我们可以使用createObjectURL方法将其转换为URL地址。

const blob = new Blob(['Hello, World!'], { type: 'text/plain' });
const url = URL.createObjectURL(blob);

上述代码中，我们使用Blob构造函数创建了一个包含"Hello, World!"的文本类型的Blob对象，并使用createObjectURL方法将其转换为URL地址存储在url变量中。

最终，我们可以将其插入到页面中进行展示或下载。

三、使用Blob下载或展示文件

通过Blob和createObjectURL，我们可以实现文件的下载或展示。

1. 展示图片

// HTML代码
<img src="blob:{url}">

// JavaScript代码
const blob = new Blob([arrayBuffer], { type: 'image/png' });
const url = URL.createObjectURL(blob);

上述代码中，我们将一个二进制的图片文件放入Blob对象中，并使用createObjectURL方法将其转换为URL地址。然后我们在HTML代码中使用img标签展示图片。此时，img的src属性为"blob:{url}"。

2. 下载文件

//HTML代码
<a href="blob:{url}" download="filename.txt">Download File</a>

//JavaScript代码
const blob = new Blob(['Hello, World!'], { type: 'text/plain' });
const url = URL.createObjectURL(blob);

上述代码中，我们将一个包含"Hello, World!"文本字符串的Blob对象转换为URL地址，并使用a标签展示。a标签的href属性为"blob:{url}"，download属性为需要下载的文件名称。

四、注意事项

虽然createObjectURL非常灵活方便，但是它也有一些需要注意的事项。

1. 释放URL

使用完URL后，需要手动释放。否则可能会导致内存泄漏和性能问题。

URL.revokeObjectURL(url);

2. 不支持IE

IE浏览器不支持createObjectURL方法，需要手动实现下载功能。

代码示例：

var xhr = new XMLHttpRequest();
xhr.open('GET', url, true);
xhr.responseType = 'blob';
xhr.onload = function() {
  if (this.status === 200) {
    var blob = new Blob([this.response], { type: 'image/png' });
    if (window.navigator.msSaveOrOpenBlob) {
      window.navigator.msSaveOrOpenBlob(blob, 'file.png');
    } else {
      var url = window.URL.createObjectURL(blob);
      window.location.href = url;
    }
  }
};
xhr.send();

3. 内存限制

将大文件转换为URL地址可能会导致内存问题。所以尽量使用流或者分片等方式。

五、总结

createObjectURL是使用JS展示和下载二进制文件非常便捷的方法。使用它可以实现图片、音频、视频、文本等多种文件的下载、展示等实现。然而，需要注意释放URL、兼容性问题和内存限制等问题。