laravel+vue+vuetify(下载图片到本地)

 
downloadByBlob(url,name) {
                let image = new Image()
                image.setAttribute('crossOrigin', 'anonymous')  //处理跨域 可以在浏览器安装cors插件
                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) => {    //图片的blob对象
                        let url = URL.createObjectURL(blob)  //将blob对象转为url
                        this.download(url,name)
                        // 用完释放URL对象
                        URL.revokeObjectURL(url)
                    })
                }
            },
            download(href, name) {
            let eleLink = document.createElement('a')
            eleLink.download = name  //下载的文件名
            eleLink.href = href   //文件流
            eleLink.click()  //单击下载
            eleLink.remove()  //移除
            },
    //remoteSelected选中的图片的数据(后台返回的数据),循环下载
           async writeImage(remoteSelected){
                this.loading = true;
                for(var key in remoteSelected) {
       let url = remoteSelected[key]['url']
       let    name = remoteSelected[key]['name']
                    await this.downloadByBlob(url,name);
                }
            }
踩过这个坑,还有下一个坑等着你,这一路就是给自己填坑,坑填多了,也就习惯了,直到这一路平坦了,也就无怨无悔了。
原文地址:https://www.cnblogs.com/xiaofeilin/p/12966249.html