<
meta
charset
=
"
UTF-8
"
>
<
meta
http-equiv
=
"
X-UA-Compatible
"
content
=
"
IE=edge
"
>
<
meta
name
=
"
viewport
"
content
=
"
width=device-width, initial-scale=1.0
"
>
<
title
>
Document
</
title
>
</
head
>
</
body
>
<
script
>
function
loadXMLDoc
(
)
{
var
xmlhttp
;
if
(
window
.
XMLHttpRequest
)
{
xmlhttp
=
new
XMLHttpRequest
(
)
;
}
else
{
xmlhttp
=
new
ActiveXObject
(
"Microsoft.XMLHTTP"
)
;
xmlhttp
.
onreadystatechange
=
function
(
)
{
if
(
xmlhttp
.
readyState
==
4
&&
xmlhttp
.
status
==
200
)
{
console
.
log
(
xmlhttp
.
response
)
let
blob
=
new
Blob
(
[
xmlhttp
.
response
]
,
{
type
:
"*"
}
)
;
console
.
log
(
123
,
blob
)
const
creatA
=
document
.
createElement
(
"a"
)
;
creatA
.
href
=
URL
.
createObjectURL
(
blob
)
;
creatA
.
download
=
`
自定义想怎么命名就怎么命名.类型
`
creatA
.
click
(
)
;
document
.
body
.
appendChild
(
creatA
)
;
document
.
body
.
removeChild
(
creatA
)
;
window
.
URL
.
revokeObjectURL
(
creatA
.
href
)
;
xmlhttp
.
open
(
"GET"
,
"图片地址换个能用的，不知道这个能不能用了"
,
true
)
;
xmlhttp
.
send
(
)
;
loadXMLDoc
(
)
</
script
>
</
html
>
// Turns out getAsFile will return a
blob
, not a file
var
blob
= event.clipboardData.items[0].getAsFile(),
form = new FormData(),
request = ne...
这里介绍两种
方法
，使用
Blob
对象 和 使用 js-file-download
但是 不管使用哪种
方法
，发送请求时都要
设置
responseType
如果不打算了解直接使用，请通过目录进入 四、主要完整代码
方法
一：使用
Blob
对象
Blob
对象表示
一个
不可变、原始数据的类
文件
对象。
Blob
表示的不一定是JavaScript原生格式的数据。File接口基于
Blob
，继承了
blob
的功...
Blob
对象表示
一个
不可变、原始数据的类
文件
对象。
Blob
表示的不一定是JavaScript原生格式的数据。File 接口基于
Blob
，继承了
blob
的功能并将其扩展使其支持用户系统上的
文件
。
本文主要给大家介绍了关于js获取图片
url
的
Blob
值并预览的相关内容，下面话不多说了，来一起看看详细的介绍吧
方法
如下
1）使用 XMLHttpRequest 对象获取图片
url
的
Blob
值
//获取图片的
Blob
值
function getImage
Blob
(
url
, cb) {
var xhr = new XMLHttpRequest();
xhr.open(get, u
} else {
let event = document.createEvent(MouseEvents);
event.initEvent('click', true, true);
obj.dispatchEvent(event);
const fileDownload = (res,obj) => { //
下载
obj :{
userName
下载
人
Blob
对象表示
一个
不可变、原始数据的类
文件
对象。它的数据可以按文本或二进制的格式进行读取，也可以转换成ReadableStream来用于数据操作。
Blob
表示的不一定是JavaScript原生格式的数据。File接口基于
Blob
，继承了
blob
的功能并将其扩展使其支持用户系统上的
文件
。
详细了解请移步：
Blob
- Web API 接口参考 | MDN
1、基于vue，以pos...
理解
Blob
对象
在
Blob
对象出现之前，在javascript中一直没有比较好的方式处理二进制
文件
，自从有了
Blob
了，我们就可以使用它操作二进制数据了。
现在我们开始来理解下Bolb对象及它的
文件
流
下载
应用场景，话不多说了，来一起看看详细的介绍吧
1. 创建
Blob
对象方式如下：
var
blob
= new
Blob
(dataArray, options);
dataArray: 它是
一个
数组，它包含了要添加到
Blob
对象中的数据。数组可以是二进制对象或者字符串。
options是可选的对象参数，用于
设置
数组中数据的MIME类型。
1. 创建
一个
DOMString对象的
Blob
对象。如
Blob
，Binary Large Object的缩写，二进制类型的大对象，代表不可改变的原始数据
在计算机中，
BLOB
常常是数据库中用来存储二进制
文件
的字段类型。
Blob
基本用法
Blob
对象
Blob
对象指的是字节序列，并且具有size属性，是字节序列中的字节总数，和
一个
type属性，它是小写的ASCII编码的字符串表示的媒体类型字节序列。
size:以字节数返回字节序列的大小。获取时，符合要求的用户代理必须返回
一个
FileReader或
一个
FileReaderSync对象可以读取的总字节数，如果
Blob
没有要读取的字节，则返回0 。
type:小写的ASCII编码字符串
Blob
是
一个
类
文件
的不可变的原始数据对象，非javascript原生数据类型，File对象就是继承自
Blob
对象，且在
Blob
的基础上进行扩展，以便支持用户系统上的
文件
。
最近在做以post请求方式导出excel时，想到了可以使用
Blob
对象将后台返回的输出流以arraybuffer或
blob
的格式接收交给
Blob
处理，最后使用
URL
生成链接，供浏览器
下载
excel。
vue2.x
webpack3.x
