vue实现下载后端返回的http在线预览图片地址

<template>
    <div>
        <img :src="url" alt="" @click="downLoad">
    </div>
</template>

<script>
export default {
    data() {
        return {
            url: '图片地址'
        }
    },
    methods: {
        downLoad() {
            fetch(this.url)
                .then(response => response.blob())
                .then(blob => {
                    const url = window.URL.createObjectURL(blob);
                    const a = document.createElement('a');
                    a.href = url;
                    a.download = '下载文件名称'
                    document.body.appendChild(a);
                    a.click();
                    window.URL.revokeObjectURL(url);
                })
                .catch(error => console.error('Error downloading file:', error));
        }
    }
}
</script>

<style>
img{
    width: 500px;
    height: 500px;
}
</style>