前幾天一個簡單的下載圖片的需求折騰了我后端大佬好幾天，最終還是需要前端來搞，開始說不行的筆者最后又行了，所以趁着這個機會來總結一下下載圖片到底有多少種方法。
先起個服務
使用expressjs起個簡單的后端服務，先安裝：
mkdir demo
cd demo
npm init
npm install express --save// v4.17.1
然后創建一個app.js文件，輸入：
const express = require('express')
const app = express()
app.get('/', (req, res) => {
res.send('hello world')
})
app.listen(3000, () => {
console.log('服務啟動完成')
})
然后在命令行輸入：node app.js，訪問http://localhost:3000/，頁面顯示hello world即表示服務啟動成功。
接下來分別模擬幾種情況：
- 情況1.靜態圖片
創建一個public文件夾，隨便拷貝一張圖片比如test.jpg進去，然后添加以下代碼：
// ...
app.use(express.static('./public'))
// app.listen...
瀏覽器訪問http://localhost:3000/test.jpg即可看到該圖片。
- 情況2.讀取圖片文件，以流的形式返回
app.get('/getFileStream', (req, res) => {
const fileName = req.query.name
const stream = fs.createReadStream(path.resolve('./public/' + fileName))
stream.pipe(res)
})
瀏覽器訪問http://localhost:3000/getFileStream?name=test.jpg即可訪問到該圖片。
- 情況3.讀取圖片文件返回流並添加
Content-Disposition響應頭
Content-Disposition響應頭是MIME協議的擴展，用來告訴瀏覽器如何處理服務器發送的文件，有三種取值：
Content-Disposition: inline// 如果瀏覽器能直接打開該文件會直接打開，否則觸發保存
Content-Disposition: attachment// 告訴瀏覽器以附件的形式發送，會直接觸發保存，會以接口的名字作為默認的文件名
Content-Disposition: attachment; filename="xxx.jpg"// 告訴瀏覽器以附件的形式發送，會直接觸發保存，filename的值作為默認的文件名
app.get('/getAttachmentFileStream', (req, res) => {
const fileName = req.query.name
// attachment方法實際上設置了兩個響應頭的值：
/*
Content-Disposition: attachment; filename="【文件名】"
Content-Type: 【文件MIME類型】
*/
res.attachment(fileName);
const stream = fs.createReadStream(path.resolve('./public/' + fileName))
stream.pipe(res)
})
- 情況4.動態生成圖片返回流
我們以生成二維碼為例，使用qr-image這個庫來創建二維碼，添加以下代碼：
const qr = require('qr-image')
app.get('/createQrCode', (req, res) => {
// 生成二維碼只讀流
const data = qr.image(req.query.text, {
type: 'png'
});
data.pipe(res)
})
- 情況5.返回
base64字符串
app.get('/createBase64QrCode', (req, res) => {
const data = qr.image(req.query.text, {
type: 'png'
});
const chunks = []
let size = 0
data.on('data', (chunk) => {
chunks.push(chunk)
size += chunk.length
})
data.on('end', () => {
const data = Buffer.concat(chunks, size)
const base64 = `data:image/png;base64,` + data.toString('base64')
res.send(base64)
})
})
- 情況6.上述幾種情況的post請求方式
// 解析json類型的請求體
app.use(express.json())
// 解析urlencoded類型的請求體
app.use(express.urlencoded())
app.post('/getFileStream', (req, res) => {
const fileName = req.body.name
const stream = fs.createReadStream(path.resolve('./public/' + fileName))
stream.pipe(res)
})
app.post('/getAttachmentFileStream', (req, res) => {
const fileName = req.body.name
res.attachment(fileName);
const stream = fs.createReadStream(path.resolve('./public/' + fileName))
stream.pipe(res)
})
app.post('/createQrCode', (req, res) => {
const data = qr.image(req.body.text, {
type: 'png'
});
data.pipe(res)
})
一.a標簽下載
a標簽html5版本新增了download屬性，用來告訴瀏覽器下載該url，而不是導航到它，可以帶屬性值，用來作為保存文件時的文件名，盡管說有同源限制，但是我實際測試時非同源的也是可以下載的。
對於沒有設置Content-Disposition響應頭或者設置為inline的圖片來說，因為圖片對於瀏覽器來說是屬於能打開的文件，所以並不會觸發下載，而是直接打開，瀏覽器不能預覽的文件無論有沒有Content-Disposition頭都會觸發保存：
<!-- 直接打開 -->
<a href="/test.jpg" download="test.jpg" target="_blank">jpg靜態資源</a>
<!-- 觸發保存 -->
<a href="/test.zip" download="test.pdf" target="_blank">zip靜態資源</a>
<!-- 觸發保存 -->
<a href="https://www.7-zip.org/a/7z1900-x64.exe" download="test.zip" target="_blank">三方exe靜態資源</a>
<!-- 直接打開 -->
<a href="/createQrCode?text=http://lxqnsys.com/" download target="_blank">二維碼流</a>
<!-- 直接打開 -->
<a href="/getFileStream?name=test.jpg" download target="_blank">jpg流</a>
<!-- 觸發保存 -->
<a href="/getFileStream?name=test.zip" download target="_blank">zip流</a>
<!-- 觸發保存 -->
<a href="/getAttachmentFileStream?name=test.jpg" download target="_blank">附件jpg流</a>
<!-- 觸發保存 -->
<a href="/getAttachmentFileStream?name=test.zip" download target="_blank">附件zip流</a>
所以說如果想用a標簽下載圖片，那么要讓后端加上Content-Disposition響應頭，另外也必須以流的形式返回，跨域圖片符合這個要求也可以下載，即使響應沒有允許跨域的頭，但是靜態圖片即使添加了這個頭也是直接打開：
// 經測試，瀏覽器仍然直接打開圖片
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:協議的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字符串可能會非常大，傳輸慢以及浪費流量，另外當然也得后端支持，需要同域或允許跨域。
三.blob格式下載
還是a標簽，它還支持blob:協議的URL，利用這個可以把響應類型設置為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下載
這個方法其實和方法二和方法三是類似的，只是相當於把圖片請求方式換了一下：
<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()
// 跨域圖片需要添加這個屬性，否則畫布被污染了無法導出圖片
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:協議
let data = canvas.toDataURL()
this.canvasBase64Img = data
// 2.blob:協議
canvas.toBlob((blob) => {
const blobData = URL.createObjectURL(blob)
this.canvasBlobImg = blobData
})
}
img.src = '/createQrCode?text=http://lxqnsys.com/'
}
}
</script>
img標簽是可以跨域的，但是跨域的圖片繪制到canvas里后無法導出，瀏覽器會報錯，可以給img添加crossOrigin屬性，但是，如果圖片沒有允許跨域的頭加了也沒用。
五.表單形式下載
對於post請求方式下載圖片的話，除了使用上述的方法二和方法三之外，還可以使用form表單：
<template>
<el-button type="primary" @click="formType">from表單下載</el-button>
</div>
</template>
<script>
export default {
methods: {
formType () {
// 創建一個隱藏的表單
const form = document.createElement('form')
form.style.display = 'none'
form.action = '/getAttachmentFileStream'
// 發送post請求
form.method = 'post'
form.target = '_blank'
document.body.appendChild(form)
const params = {
name: 'test.jpg'
}
// 創建input來傳遞參數
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>
使用該方式，圖片流的響應頭需要設置Content-Disposition，否則瀏覽器也是直接打開圖片，有該響應頭的話跨域圖片也可以下載，即使圖片不允許跨域。
六.ifrmae下載
document.execCommand有一個SaveAs命令，可以觸發瀏覽器的另存為行為，利用這個可以把圖片加載到iframe里，然后通過iframe的document來觸發該命令：
<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里被支持。
小結
本文簡單分析了一下前端下載圖片的各種方式，各位可以根據實際需求進行選擇，除了最后一種方法，其余方法均未在IE上測試，有需要的可以自行測試。