极客观点
项目管理
HarmonyOS
如题，点击下载图片按钮，下载下来一个txt类型的文件。把类型改成png再打开才行。
怎么把类型改过来呢？
俺还有个问题：只有我一个人看不到思否网站上的图片了嘛？
<!DOCTYPE html>
<html lang="en">
<head>
<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>图片下载</title>
</head>
<style>
div {
width: 30vw;
margin: 3rem auto;
text-align: center;
}
img,
video {
width: 100%;
}
</style>
<body>
<div>
<img
src="https://img-blog.csdnimg.cn/534762daa9654b61a89b341a7a82e123.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5LqU6Iqx5ryP,size_20,color_FFFFFF,t_70,g_se,x_16#pic_center">
<br />
<button onclick="downloadUrlFile(url)">下载图片</button>
</div>
<script>
// 下载含有url的文件
let url = 'https://img-blog.csdnimg.cn/534762daa9654b61a89b341a7a82e123.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5LqU6Iqx5ryP,size_20,color_FFFFFF,t_70,g_se,x_16#pic_center'
function downloadUrlFile(url, fileName = new Date().valueOf()) {
const url2 = url.replace(/\\/g, '/');
const xhr = new XMLHttpRequest();
xhr.open('GET', url2, true);
xhr.responseType = 'blob';
//xhr.setRequestHeader('Authorization', 'Basic a2VybWl0Omtlcm1pdA==');
// 为了避免大文件影响用户体验，建议加loading
xhr.onload = () => {
if (xhr.status === 200) {
// 获取文件blob数据并保存
console.log(xhr.response)
saveAs(xhr.response, fileName);
}
};
xhr.send();
}
function saveAs(data, name) {
const urlObject = window.URL || window.webkitURL || window;
const export_blob = new Blob([data]);
//createElementNS() 方法可创建带有指定命名空间的元素节点。
//此方法可返回一个 Element 对象。
const save_link = document.createElementNS('http://www.w3.org/1999/xhtml', 'a');
save_link.href = urlObject.createObjectURL(export_blob);
save_link.download = name;
save_link.click();
}
</script>
</body>
</html>
文件名称要加上后缀。
获取后缀的方法，注意不兼容IE