Leanote's Blog

注意, 跨域的图片地址不能下载, 会直接打开, 没跨域的可以下载

第一个: 图片下载点击会打开新标签页, 解决: href的url后面加上?response-content-type=application/octet-stream

<a 
:href="item.url + '?response-content-type=application/octet-stream'"
:download="item.name">点击下载</a>

第二个

// url为下载地址
fetch(url, { method: 'get', headers: { 'Content-Type': 'image/jpeg' } }).then(
    res => res.blob().then(blob => {
        var reader = new FileReader()
        reader.readAsDataURL(blob)   // 转换为base64，可以直接放入a标签href
        reader.onload = function (e) {
            var downItem = document.createElement('a')   // 转换完成，创建一个a标签用于下载
            downItem.style.display = "none"
            downItem.download = name
            downItem.href = String(e.target.result)
            downItem.click()
            downItem.remove()
            // document.body.appendChild(downItem);
            // downItem.click()
            // document.body.removeChild(downItem);
        }
    })
)

通用方法: 跨域图片下载, 未跨域的也能下载