Leanote's Blog

.rflex {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -ms-flex-direction: row;
    -webkit-flex-direction: row;
    flex-direction: row;
}
.cflex {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -ms-flex-direction: column;
    -webkit-flex-direction: column;
    flex-direction: column;
}
.flex_justify_between {
    -webkit-box-pack: space-between;
    -ms-flex-pack: space-between;
    -webkit-justify-content: space-between;
    justify-content: space-between;
}
.flex_justify_around {
    -webkit-box-pack: space-around;
    -ms-flex-pack: space-around;
    -webkit-justify-content: space-around;
    justify-content: space-around;
}
.flex_justify_center {
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
}
.flex_justify_end {
    -webkit-box-pack: end;
    -moz-justify-co

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

第一个: 图片下载点击会打开新标签页, 解决: 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);
        }
    })
)

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