js 下载文件/图片

最近做了一个类似element的上传组件，顺带写了文件下载功能，遇到了一点小问题。

在网上看了很多文章，大多人给出的方法只用了a标签，虽设了download属性，也只是预览 而不是下载，具体原因我没有仔细研究，这里把我成功的方法贴出来，供参考。

解决方式： 把下载a标签 放到axios中，需要使用到插件：axios

注意：

1. 如果图片是线上链接或其他格式，需要转化成blob形式。

2. 下载状态：上一次下载没有成功，最好在按钮上设置状态，控制不要开始下一次下载

代码实现

首先准备好axios，responseType: 'blob'这个是很重要的属性，一定要加

let url = '这个是你将要下载的图片地址'
axios.get(url, {
    responseType: 'blob',
}).then(res => {
    // 后续的代码都是放到这个位置
})

第一步：把下载地址转换成 blob

let blob = new Blob([url]);

第二步：创建URL

 let objectUrl = URL.createObjectURL(blob) // 创建URL

第三步：创建a标签

let a = document.createElement('a');
a.href = objectUrl;
a.download = `文件下载名.后缀`
document.body.appendChild(a)

第四步：主动触发a标签点击事件

let event = new MouseEvent('click')
a.dispatchEvent(event)

// 点击后移除a标签
setTimeout(() => {
    document.body.removeChild(link)
}, 500)

年纪大了，记性不中用，记录下我的代码，方便自己回忆 😅

data () {
    return { canAjax: true }   // 是否可以下载
}

handleDownLoad ({ rawFile, index }) {
    if ( this.canAjax ) {
        this.canAjax = false;

        // 获取要下载的文件 【着是我自己代码的逻辑，跟下载没关系哦】
        const file = this.getFile(rawFile);
        // url 图片下载地址
        let url = file.response && file.response.data && file.response.data.url || '';

        axios.get(url, {
            responseType: 'blob',
        }).then(res => {

            this.canAjax = true

            let blob = new Blob([res.data]);
            let objectUrl = URL.createObjectURL(blob) // 创建URL

            // 创建a标签
            let link = document.createElement('a');
            link.href = objectUrl;
            link.download = `${file.name}`
            document.body.appendChild(link)

            // 给a标签增加点击事件
            let event = new MouseEvent('click')
            link.dispatchEvent(event)
            setTimeout(() => {
                document.body.removeChild(link)
            }, 500)

        }).catch(() => {
            this.canAjax = true
        })
    }
}