new Blob()详解以及blob转file

定义:

Blob() 构造函数返回一个新的 Blob 对象。blob 的内容由参数数组中给出的值的串联组成。

语法:
javascript 复制代码
var aBlob = new Blob( array, options );
参数:

array 是一个由ArrayBuffer, ArrayBufferView, Blob, DOMString 等对象构成的 Array ,或者其他类似对象的混合体,它将会被放进 Blob。DOMStrings 会被编码为 UTF-8。

options 是一个可选的BlobPropertyBag字典,它可能会指定如下两个属性:

type,默认值为 "",它代表了将会被放入到 blob 中的数组内容的 MIME 类型。

endings,默认值为"transparent",用于指定包含行结束符\n的字符串如何被写入。它是以下两个值中的一个:"native",代表行结束符会被更改为适合宿主操作系统文件系统的换行符,或者 "transparent",代表会保持 blob 中保存的结束符不变 非标准

示例:
javascript 复制代码
var aFileParts = ['<a id="a"><b id="b">hey!</b></a>']; // 一个包含 DOMString 的数组  可以是dom 数字 对象 日期等等   都要转成字符串  
//例如: let aFileParts = [JSON.stringify({age:18,sex:'男'})]   
var oMyBlob = new Blob(aFileParts, {type : 'text/html'}); // 得到 blob  里面的type是 MIME 类型   也就是 前面内容的格式  需要转成什么类型的格式
blob转file:
javascript 复制代码
 let obj = {
            age: 18,
            sex: '男'
        }
        let content = JSON.stringify(obj)
            // blob类型
        let blob = new Blob([content], {
                type: 'application/json'
            })
            // 将blob转成url
        let url = URL.createObjectURL(blob) //blob:null/244bec7f-e3d3-43d5-803e-f98cc5c8117f  =>链接里面的数据就是右边的内容 {"age":18,"sex":"男"}
        console.log(url)
            //blob转file
        let filename = '文件名'
        var file = new File([blob], filename, {
            type: 'application/json',
            lastModified: Date.now()
        });
        //或者
        var file1 = new File([content], filename, {
            type: 'application/json',
            lastModified: Date.now()
        });
        console.log("文件", file, file1)
相关推荐
GISer_Jing几秒前
height、line-height、font-size相同字体遮挡问题
前端·ai
字节渡客5 分钟前
接口参数偶尔丢失、乱码、解析失败,不是前端传参问题
前端
夏幻灵6 分钟前
前端八股:JavaScript 深拷贝详解:实现方式、递归原理与循环引用
开发语言·前端·javascript
@#¥&~是乱码鱼啦13 分钟前
ArkWeb开发手记01|Web 组件 H5 加载与生命周期管理
前端
suaizai_14 分钟前
ComputerUse:让AI真正操控桌面系统
java·前端·javascript
CodeSheep20 分钟前
朋友面试谈薪报价2w,HR非得压到1.9,还反问他:你就差这1000块钱?后来背调时问了他前同事十几个问题,对方最后直接挂了
前端·后端·程序员
傲世仙尊21 分钟前
C++起步-命名空间解决命名冲突与cin-cout缺省参数
开发语言·c++
hljqwb25 分钟前
java服务异常日志只打印异常类型,没有堆栈定位分析(十)
java·开发语言
IMPYLH28 分钟前
HTML 的 <track> 元素
前端·html
涛涛ing28 分钟前
35个组件,把GPU特效直接跑在真实DOM上:Canvas UI正在重新定义Web视觉
前端