/***
*
Blob对象表示一个不可变,原始数据的类文件对象,如果要从其他非Blob对象和结构构建一个Blob,需要使用Blob()构造函数,
如果要获取一个blob数据的子集blob需要使用Blob.slice()方法
1. 构造函数
Blob(blobParts[, options]) 返回一个新创建的 Blob 对象,其内容由参数中给定的数组串联组成。
2. 属性
Blob.size => Blob对象中所包含数据的大小(字节)
Blob.type => 一个字符串,表明该 Blob 对象所包含数据的 MIME 类型。如果类型未知,则该值为空字符串。
3. 方法
Blob.slice([start[, end[, contentType]]]) => Blob.slice([start[, end[, contentType]]])
作用:
1. 可以获取某个文件内容或后台返回的文件(需要设置响应类型为Blob),再通过createObjectURL方法,变成一个文件地址,实现本地文件预览
2. 前端下载后台返回的文件时,文件为文件流或者二进制时,可以使用Blob方法,变成一个文件地址,然后进行下载功能(需要设置响应类型为Blob)。
- 使用时第二个参数的文件类型要指定
FileReader
FileReader对象允许Web应用程序异步读取存储在计算机上文件的内容,使用file或Blob对象指定要读取的文件或数据
1. 构造函数
new FileReader();
2. 属性
FileReader.error 当一个文件读取错误时
FileReader.readState
0 还没有加载数据
1 正在加载数据
2 完成加载数据
FileReader.result 当文件完全读取完成后
3. 事件
FileReader.onabort 在读取时中断的时候触发
FileReader.error 在发生错误时
FileReader.onload 在读取完成后
FileReader.onloadstart 在刚开始读取的时候
FileReader.onloadend 在读取结束时(要么成功要么失败)
FileReader.onprogress 在读取的过程中
4. 方法
FileReader.readAsDataUrl() 开始读取指定Blob中的内容,一旦完成,result属性中包含一个data:URL格式的Base64字符串来表示所读取的文件内容
FileReader.readAsBinaryString() 开始读取指定Blob中的内容,一旦完成,result属性中将包含所读取文件的原始二进制数据。
FileReader.readAsText() 开始读取指定Blob中的内容,一旦完成,result属性中将包含一个字符串来表示所读文件的内容
FileReader.abort() 中止读取操作,在返回时readState属性为2
FileReader.readAsArrayBuffer() 开始读取指定的Blob文件,一旦完成,result属性中保存的将是读取文件的ArrayBuffer数据对象
作用:实现文件下载
*/
let debug = {
hello: "world"
};
let blob = new Blob([JSON.stringify(debug, null, 2)], {type: 'application/json'});
console.log(blob);
//var typedArray = GetTheTypedArraySomehow();
// let blob = new Blob([debug.hello], {type: 'application/octet-stream'}); // 传入一个合适的 MIME 类型
// let url = URL.createObjectURL(blob);
// console.log(url)
/*Blob作用1【实现文件预览(本地文件后台返的文件)】*/
/**
// 本地
const blob = new Blob([file.file], {type: 'application/pdf'});
this.signFileUrl = URL.createObjectURL(blob); // 将生成的地址赋值给src的属性
// 后台请求ajax 需要设置响应类型为Blob,{responseType: "blob"}
*/
/*Blob作用2【ajax后下载({responseType: "blob"})】*/
function downloadFile() {
const blob = new Blob([result]);
const fileName = '文件名称.xlsx';
const elink = document.createElement('a');
elink.download = fileName;
elink.style.display = 'none';
elink.href = URL.createObjectURL(blob);
document.body.appendChild(elink);
elink.click();
URL.revokeObjectURL(elink.href); // 释放URL 对象
document.body.removeChild(elink);
}
/*FileReader【实现下载({responseType: "blob"})】*/
xhr.onload = function (result) {
if (this.status === 200) {
var blob = this.response;
var reader = new FileReader();
reader.readAsDataURL(blob); // 转换为base64,可以直接放入a表情href
reader.onload = function (e) {
// 转换完成,创建一个a标签用于下载
var a = document.createElement('a');
a.download = templateName + '.xlsx';//xls
console.log(e);
a.href = e.target.result;
$("body").append(a);
a.click(); // 修复firefox中无法触发click
$(a).remove();
}
}
};
/*根据后台返回的文件地址,进行下载文件,有时候在浏览器上本想下载却成了文件预览*/
function downloadPdf() {
let request = new XMLHttpRequest();
request.responseType = 'blob';
request.open('GET', this.signFileUrl);
request.onload = function() {
let url = window.URL.createObjectURL(this.response);
let a = document.createElement('a');
document.body.appendChild(a);
a.href = url;
a.download = '签名文件.pdf';
a.click();
}
request.send();
}
if (result) {
const blob = new Blob([content]);
const fileName = '文件名称';
if ('download' in document.createElement('a')) {
// 非IE下载
const elink = document.createElement('a');
elink.download = fileName;
elink.style.display = 'none';
elink.href = URL.createObjectURL(blob);
document.body.appendChild(elink);
elink.click();
URL.revokeObjectURL(elink.href); // 释放URL 对象
document.body.removeChild(elink);
} else {
// IE10+下载
navigator.msSaveBlob(blob, fileName);
}
} else {
that.$message.error(result.data.message);
}