打印截图:
image.png
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!--
Blob 是什么?
Blob(Binary Large Object)表示二进制类型的大对象。在数据库管理系统中，将二进制数据存储起来。
Blob使用场景
分片上传
从互联网下载数据
Blob用作URL
Blob 转化为 Base64
图片压缩
生成pdf
-->
<!-- <a download
href="http://n.sinaimg.cn/default/1_img/upload/3933d981/738/w930h608/20210202/2bd7-kiksqxh7915093.jpg">下载</a> -->
<!---这边点击下载并不会成功，只是跳转到这个页面的地址而已，原因是因为他们跨域了-->
<img src="" alt="">
<script>
function downLoad(url) {
const xhr = new XMLHttpRequest(); //在我们js要获取服务端的数据，我们应该用到ajax
xhr.open("get", url); //规定请求的类型、URL 服务器的地址
xhr.responseType = 'blob'; //响应的数据类型是二进制，磁盘存放的数据就是二进制
xhr.send(); //将请求发送到服务器。
xhr.onload = function(){
const fileBlob = xhr.response;
const fileUrl = URL.createObjectURL(fileBlob); //将blob转成url地址
console.log(fileBlob)//打印出����乱码
console.log(fileUrl)
//document.querySelector('img').setAttribute('src',fileUrl) //设置src的属性
const elementA = document.createElement('a');
elementA.setAttribute('href',fileUrl);
elementA.innerHTML = "下载图片"
elementA.setAttribute("downLoad","");
document.body.appendChild(elementA)
}//发送出去我们需要监听，我们要监听是否加载完毕
}
let imgUrl = "http://n.sinaimg.cn/default/1_img/upload/3933d981/738/w930h608/20210202/2bd7-kiksqxh7915093.jpg";
downLoad(imgUrl)
</script>
</body>
</html>
网友评论