近日有個需求需要下載協(xié)議照片，使用的是阿里云的oss，由于無法協(xié)調(diào)后端那邊配置跨域響應(yīng)頭，找了很多方案都不理想，終于在摸索下可以實現(xiàn)完美下載
常見方案有兩個問題
1.圖片格式(png,jpg等)不會觸發(fā)下載，直接打開預(yù)覽
2.跨域問題
先捋一下常見方案
方法一、a標簽下載
a標簽html5版本新增了download屬性，用來告訴瀏覽器下載該url，而不是導(dǎo)航到它，可以帶屬性值，用來作為保存文件時的文件名，盡管說有同源限制，但是我實際測試時非同源的也是可以下載的。
對于沒有設(shè)置Content-Disposition響應(yīng)頭或者設(shè)置為inline的圖片來說，因為圖片對于瀏覽器來說是屬于能打開的文件，所以并不會觸發(fā)下載，而是直接打開，瀏覽器不能預(yù)覽的文件無論有沒有Content-Disposition頭都會觸發(fā)保存：
<!-- 直接打開 -->
<a href="/test.jpg" download="test.jpg" target="_blank">jpg靜態(tài)資源</a>
<!-- 觸發(fā)保存 -->
<a href="/test.zip" download="test.pdf" target="_blank">zip靜態(tài)資源</a>
<!-- 觸發(fā)保存 -->
<a href="https://www.7-zip.org/a/7z1900-x64.exe" download="test.zip" target="_blank">三方exe靜態(tài)資源</a>
<!-- 直接打開 -->
<a href="/createQrCode?text=http://lxqnsys.com/" download target="_blank">二維碼流</a>
<!-- 直接打開 -->
<a href="/getFileStream?name=test.jpg" download target="_blank">jpg流</a>
<!-- 觸發(fā)保存 -->
<a href="/getFileStream?name=test.zip" download target="_blank">zip流</a>
<!-- 觸發(fā)保存 -->
<a href="/getAttachmentFileStream?name=test.jpg" download target="_blank">附件jpg流</a>
<!-- 觸發(fā)保存 -->
<a href="/getAttachmentFileStream?name=test.zip" download target="_blank">附件zip流</a>
所以說如果想用a標簽下載圖片，那么要讓后端加上Content-Disposition響應(yīng)頭，另外也必須以流的形式返回，跨域圖片符合這個要求也可以下載，即使響應(yīng)沒有允許跨域的頭，但是靜態(tài)圖片即使添加了這個頭也是直接打開：
// 經(jīng)測試，瀏覽器仍然直接打開圖片
app.use(express.static('./public', {
setHeaders(res) {
res.attachment()
}
}))
和a標簽方式類似的還可以使用location.href：
location.href = '/test.jpg'
location.href = '/test.zip'
行為和a標簽完全一致。
這兩種方式的缺點也很明顯，一是不支持post等其他方式的請求，二是需要后端支持。
方法二、base64格式下載
a標簽支持data:協(xié)議的URL，利用這個可以讓后端返回base64格式的字符串，然后使用download屬性進行下載：
<template>
<a :href="base64Img" download target="_blank">base64字符串</a>
</template>
<script>
import axios from 'axios'
export default {
data () {
return {
base64Img: ''
}
},
async created () {
let { data } = await axios.get('/createBase64QrCode?text=http://lxqnsys.com/')
this.base64Img = data
}
}
</script>
這個方式就隨便get還是post請求了，缺點是base64字符串可能會非常大，傳輸慢以及浪費流量，另外當(dāng)然也得后端支持，需要同域或允許跨域。
方法三、blob格式下載
還是a標簽，它還支持blob:協(xié)議的URL，利用這個可以把響應(yīng)類型設(shè)置為blob，然后和base64一樣扔給a標簽：
<template>
<a :href="blobData" download target="_blank">blob</a>
</template>
<script>
import axios from 'axios'
export default {
data () {
return {
blobData: null,
blobDataName: ''
}
},
async created () {
let { data } = await axios.get('/test.jpg', {
responseType: 'blob'
})
const blobData = URL.createObjectURL(data)
this.blobData = blobData
}
}
</script>
這個方式需要和上述幾個需要通過ajax請求的一樣，都需要后端可控，即圖片同域或支持跨域。
方法四、使用canvas下載
這個方法其實和方法二和方法三是類似的，只是相當(dāng)于把圖片請求方式換了一下：
<template>
<a :href="canvasBase64Img" download target="_blank">canvas base64字符串</a>
<a :href="canvasBlobImg" download target="_blank">canvas blob</a>
</template>
<script>
export default {
data () {
return {
canvasBase64Img: '',
canvasBlobImg: null
}
},
created () {
const img = new Image()
// 跨域圖片需要添加這個屬性，否則畫布被污染了無法導(dǎo)出圖片
img.setAttribute('crossOrigin', 'anonymous')
img.onload = () => {
let canvas = document.createElement('canvas')
canvas.width = img.width
canvas.height = img.height
let ctx = canvas.getContext('2d')
// 圖片繪制到canvas里
ctx.drawImage(img, 0, 0, img.width, img.height)
// 1.data:協(xié)議
let data = canvas.toDataURL()
this.canvasBase64Img = data
// 2.blob:協(xié)議
canvas.toBlob((blob) => {
const blobData = URL.createObjectURL(blob)
this.canvasBlobImg = blobData
})
}
img.src = '/createQrCode?text=http://lxqnsys.com/'
}
}
</script>
img標簽是可以跨域的，但是跨域的圖片繪制到canvas里后無法導(dǎo)出，瀏覽器會報錯，可以給img添加crossOrigin屬性，但是，如果圖片沒有允許跨域的頭加了也沒用。
方法五、表單形式下載
對于post請求方式下載圖片的話，除了使用上述的方法二和方法三之外，還可以使用form表單：
<template>
<el-button type="primary" @click="formType">from表單下載</el-button>
</div>
</template>
<script>
export default {
methods: {
formType () {
// 創(chuàng)建一個隱藏的表單
const form = document.createElement('form')
form.style.display = 'none'
form.action = '/getAttachmentFileStream'
// 發(fā)送post請求
form.method = 'post'
form.target = '_blank'
document.body.appendChild(form)
const params = {
name: 'test.jpg'
}
// 創(chuàng)建input來傳遞參數(shù)
for (let key in params) {
let input = document.createElement('input')
input.type = 'hidden'
input.name = key
input.value = params[key]
form.appendChild(input)
}
form.submit()
form.remove()
}
}
}
</script>
使用該方式，圖片流的響應(yīng)頭需要設(shè)置Content-Disposition，否則瀏覽器也是直接打開圖片，有該響應(yīng)頭的話跨域圖片也可以下載，即使圖片不允許跨域。
方法六、ifrmae下載
document.execCommand有一個SaveAs命令，可以觸發(fā)瀏覽器的另存為行為，利用這個可以把圖片加載到iframe里，然后通過iframe的document來觸發(fā)該命令：文章來源：http://www.zghlxwxcb.cn/news/detail-856518.html
<template>
<el-button type="primary" @click="iframeType">iframe下載</el-button>
</template>
<script>
export default {
methods: {
iframeType () {
const iframe = document.createElement('iframe')
iframe.style.display = 'none'
iframe.onload = () => {
iframe.contentWindow.document.execCommand('SaveAs')
document.body.removeChild(iframe)
}
iframe.src = '/createQrCode?text=http://lxqnsys.com/'
document.body.appendChild(iframe)
}
}
}
</script>
圖片必須要是同源的，這種方式了解一下就行，因為它只在IE里被支持。文章來源地址http://www.zghlxwxcb.cn/news/detail-856518.html
究極解決方案
// 調(diào)用方式
// 參數(shù)一： src
// 參數(shù)二： 圖片名稱，可選
const downloadImage = (imgsrc, name) => {
// 這里是核心，crossOrigin+帶參數(shù)的可以解決跨域問題，少一個都會有問題
imgsrc = imgsrc + "?v=" + Math.random();
var image = new Image()
image.setAttribute('crossOrigin', 'anonymous')
image.onload = function () {
var canvas = document.createElement('canvas')
canvas.width = image.width
canvas.height = image.height
var context = canvas.getContext('2d')
context.drawImage(image, 0, 0, image.width, image.height)
var url = canvas.toDataURL('image/png') // 得到圖片的base64編碼數(shù)據(jù)
var a = document.createElement('a') // 生成一個a元素
var event = new MouseEvent('click') // 創(chuàng)建一個單擊事件
a.download = name || 'photo' // 設(shè)置圖片名稱
a.href = url // 將生成的URL設(shè)置為a.href屬性
a.dispatchEvent(event) // 觸發(fā)a的單擊事件
}
image.src = imgsrc
}
到了這里，關(guān)于【記錄一次前端圖片下載問題】解決跨域+直接下載的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
