js 下载文件（根据URL下载文件,根据URL下载图片）

根据URL下载图片

// 根据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);
            });
        };
    }

根据URL下载文件

// 根据URL下载文件
    function downloadURL(url, filename) {
        let a = document.createElement("a");
        a.href = url;
        a.download = filename;
        a.click();
    }

实战测试

<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>