js基础-Blob （结尾有惊喜！有惊喜！有惊喜！）★★_var blob = new blob([data],

作者：不正经 | 2024-02-26 07:50:58

踩

var blob = new blob([data],

Blob

2、Blob

Blob（Binary Large Object）对象代表了一段二进制数据，提供了一系列操作接口。（以二进制形式保存的较大的对象）比如通过new Blob()创建的对象就是Blob对象.又比如,在XMLHttpRequest里,如果指定responseType为blob,那么得到的返回值也是一个blob对象.

2.1 生成Blob对象

生成Blob对象有两种方法：一种是使用Blob构造函数，另一种是对已有的Blob对象使用slice()方法切出一段。

（1）Blob构造函数

var blob = new Blob(data, type) 

1

Blob构造函数接受两个参数：

参数data是一组数据，所以必须是数组，即使只有一个字符串也必须用数组装起来.

参数type是对这一Blob对象的配置属性，目前也只有一个type也就是相关的MIME需要设置 type的值：

‘text/csv,charset=UTF-8’ 设置为csv格式，并设置编码为UTF-8

‘text/html’ 设置成html格式

注意：任何浏览器支持的类型都可以这么用

var blob = new Blob(['我是Blob'],{type: 'text/html'}); 

1

2.2 属性

blob.size   //Blob大小（以字节为单位） 

blob.type   //Blob的MIME类型，如果是未知，则是“ ”（空字符串） 

1
2

2.3 slice()

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

blob.slice( 

  optional long long start, 

  optional long long end, 

  optional DOMString contentType  }; 

1
2
3
4

参数说明：

start 可选，开始索引,可以为负数,语法类似于数组的slice方法.默认值为0.

end 可选，结束索引,可以为负数,语法类似于数组的slice方法.默认值为最后一个索引.

contentType可选，新的Blob对象的MIME类型,这个值将会成为新的Blob对象的type属性的值,默认为一个空字符串.

2.4 Blob的使用

使用Blob最简单的方法就是创建一个URL来指向Blob：

<a download="data.txt" id="getData">下载</a>   

var data= 'Hello world!'; 

var blob = new Blob([data], { 

  type: 'text/html,charset=UTF-8' 

}); 

window.URL = window.URL || window.webkitURL;  

document.querySelector("#getData").href = URL.createObjectURL(blob); 

1
2

上面的代码将Blob URL赋值给a，点击后提示下载文本文件data.txt，文件内容为“Hello World”。

2.5 URL.createObjectURL()

objectURL = URL.createObjectURL(blob); 

1

使用URL.createObjectURL()函数可以创建一个Blob URL，参数blob是用来创建URL的File对象或者Blob对象，返回值格式是：blob://URL。

注意：在每次调用 createObjectURL() 方法时，都会创建一个新的 URL 对象，即使你已经用相同的对象作为参数创建过。当不再需要这些 URL 对象时，每个对象必须通过调用 URL.revokeObjectURL() 方法传入创建的URL为参数，用来释放它。浏览器会在文档退出的时候自动释放它们，但是为了获得最佳性能和内存使用状况，你应该在安全的时机主动释放掉它们。

2.6 乱码问题

当数据中包含汉字时，导出的文件可能会出现乱码，不过我们可以这样解决：

var data = "\ufeff" + "汉字"; 

1

一般人我不告诉他：

iframe和HTML5 blob实现JS,CSS,HTML直接当前页预览

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>front_end_fan前端博客</title>
    <style>
        a{
            padding: 5px 12px;
            background: #18B7FA;
            border-radius: 5px;
            color: #fff;
            font-weight: bold;
            font-size: 14px;
        }
        pre{
            display: inline-block;
            padding: 10px;
            border: 5px solid #18B7FA;
            background: #c4e3f3;
            color:#990000;
            font-weight: bold;
        }
    </style>
</head>
<body>
<p>例如下面代码：</p>
<pre><code>    div.front_end_fan {
    position: absolute; top: 50px; left: 50px;
    -webkit-animation: clockwise 2.5s linear infinite; animation: clockwise 2.5s linear  infinite ;
    transform-origin: 70px 70px;
    }

    .front_end_fan   em {
    display: block;
    width: 40px; height: 40px;
    background: red;
    color:000;
    -webkit-animation: counter-clockwise 2.5s linear infinite; animation: counter-clockwise 2.5s linear  infinite ;
    }

    @-webkit-keyframes clockwise{
    0%  { -webkit-transform: rotate(0deg) ;  }
    100%{ -webkit-transform: rotate(360deg); }
    }

    @keyframes clockwise {
    0%  { transform: rotate(0deg) ; }
    100%{ transform: rotate(360deg); }
    }

    @-webkit-keyframes counter-clockwise {
    0%  { -webkit-transform: rotate(360deg) ;  }
    100%{ -webkit-transform: rotate(0deg); }
    }

    @keyframes counter-clockwise {
    0%  { transform: rotate(360deg) ;  }
    100%{ transform: rotate(0deg); }
    }
    <div class="front_end_fan">
        <em>front_end_fan</em>
    </div>
</code></pre>
<textarea name="" id="preid" style="display: none">

   <style>
       div.front_end_fan {
           position: absolute; top: 50px; left: 50px;
           -webkit-animation: clockwise 2.5s linear infinite; animation: clockwise 2.5s linear  infinite ;
           transform-origin: 70px 70px;
       }

       .front_end_fan em {
           display: block;
           width: 40px; height: 40px;
           background: red;
           color:#000;
           -webkit-animation: counter-clockwise 2.5s linear infinite; animation: counter-clockwise 2.5s linear  infinite ;
       }

       @-webkit-keyframes clockwise{
           0%  { -webkit-transform: rotate(0deg) ;  }
           100%{ -webkit-transform: rotate(360deg); }
       }

       @keyframes clockwise {
           0%  { transform: rotate(0deg) ; }
           100%{ transform: rotate(360deg); }
       }

       @-webkit-keyframes counter-clockwise {
           0%  { -webkit-transform: rotate(360deg) ;  }
           100%{ -webkit-transform: rotate(0deg); }
       }

       @keyframes counter-clockwise {
           0%  { transform: rotate(360deg) ;  }
           100%{ transform: rotate(0deg); }
       }
   </style>
      <div class="front_end_fan">
          <em>front_end_fan</em>
      </div>
</textarea>


<span class="seebtn" id="btn-run"><a>案例效果预览</a></span>


<script>
    var btn =document.getElementById("btn-run");
    btn.onclick = function() {
        var iframe = document.createElement('iframe');
        iframe.setAttribute('style', 'width:400px;max-width:68%;max-height:300px;height:38vh;position:fixed;border:1px solid;outline:9999px solid rgba(0,0,0,.6);top:0;right:0;left:0;bottom:0;margin:auto;overflow:hidden;background:#fff');
        iframe.src = URL.createObjectURL(new Blob([document.getElementById('preid').value],{"type":"text/html"}));
        document.codeIframe=iframe;
        document.body.appendChild(document.codeIframe);
    };
    document.body.addEventListener('mouseup', function() {
        if (document.codeIframe){
            document.body.removeChild(document.codeIframe);
            document.codeIframe=null;
        }
    });
</script>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127

(注：可直接复制代码查看效果)

声明：本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：【wpsshop博客】