Blob URL作为文件下载地址

Blob URL

Blob URL是blob协议的URL,它的格式如下:

blob:http://XXX

Blob URL可以通过URL.createObjectURL(blob)创建。在绝大部分场景下,我们可以像使用Http协议的URL一样,使用Blob URL。

作为下载地址使用,举例:

DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Blob Testtitle>
    <script>
        function createDownloadFile() {
            var content = "Blob Data";
            var blob = new Blob([content]);
            var link = document.getElementsByTagName("a")[0];
            link.download = "file";
            link.href = URL.createObjectURL(blob);
        }
        window.onload = createDownloadFile;
    script>
head>

<body>
    <a>下载a>
body>

html>

点击下载按钮,浏览器将会下载一个名为file的文件,文件的内容是:Blob Data。通过Blob对象,我们在前端代码中就可以动态生成文件,提供给浏览器下载。

Data URL和Blob URL?

Blob URL和Data URL有什么区别呢?

1.Blob URL的长度一般比较短,但Data URL因为直接存储图片base64编码后的数据,往往很长,如上图所示,浏览器在显示Data URL时使用了省略号(…)。当显式大图片时,使用Blob URL能获取更好的可能性。

2.Blob URL可以方便的使用XMLHttpRequest获取源数据,例如:

var blobUrl = URL.createObjectURL(new Blob(['Test'], {type: 'text/plain'}));
var x = new XMLHttpRequest();
// 如果设置x.responseType = 'blob',将返回一个Blob对象,而不是文本:
// x.responseType = 'blob';
x.onload = function() {
    alert(x.responseText);   // 输出 Test
};
x.open('get', blobUrl);
x.send();

对于Data URL,并不是所有浏览器都支持通过XMLHttpRequest获取源数据的。

3.Blob URL 只能在当前应用内部使用,把Blob URL复制到浏览器的地址栏中,是无法获取数据的。Data URL相比之下,就有很好的移植性,你可以在任意浏览器中使用。

除了可以用作文本的网络下载地址,Blob URL也可以用作其他资源的网络地址,例如html文件、json文件等,为了保证浏览器能正确的解析Blob URL返回的文件类型,需要在创建Blob对象时指定相应的type:

// 创建HTML文件的Blob URL
var data = "
This is a blob
"
; var blob = new Blob([data], { type: 'text/html' }); var blobURL = URL.createObjectURL(blob); // 创建JSON文件的Blob URL var data = { "name": "abc" }; var blob = new Blob([JSON.stringify(data)], { type: 'application/json' }); var blobURL = URL.createObjectURL(blob);

你可能感兴趣的:(vue,html,前端)