<template>
<div style="padding:20px">
<button @click="downloadFileByURL">根据URL下载文件</button>
<br>
<button @click="downloadImgByURL">根据URL下载图片</button>
</div>
</template>
<script>
export default {
data() {
return {
ImgURL: 'https://t7.baidu.com/it/u=1595072465,3644073269&fm=193&f=GIF',
fileURL: 'http://106.12.123.173/works/itDic/IT速查宝典.zip',
};
},
methods: {
downloadImgByURL() {
downloadImgURL(this.ImgURL, '根据URL下载的图片')
},
downloadFileByURL() {
downloadURL(this.fileURL, '根据URL下载文件')
}
},
};
// 根据URL下载文件
function downloadURL(url, filename) {
let a = document.createElement("a");
a.href = url;
a.download = filename;
a.click();
}
// 根据URL下载图片
function downloadImgURL(url, name) {
let image = new Image();
image.setAttribute("crossOrigin", "anonymous");
image.src = url;
image.onload = () => {
let canvas = document.createElement("canvas");
canvas.width = image.width;
canvas.height = image.height;
let ctx = canvas.getContext("2d");
ctx.drawImage(image, 0, 0, image.width, image.height);
canvas.toBlob(blob => {
let url = URL.createObjectURL(blob);
let a = document.createElement("a");
a.download = name;
a.href = url;
a.click();
a.remove();
// 用完释放URL对象
URL.revokeObjectURL(url);
});
};
}
</script>
