前幾天一個(gè)簡(jiǎn)單的下載圖片的需求折騰了我后端大佬好幾天，最終還是需要前端來(lái)搞，開(kāi)始說(shuō)不行的筆者最后又行了，所以趁著這個(gè)機(jī)會(huì)來(lái)總結(jié)一下下載圖片到底有多少種方法。

先起個(gè)服務(wù)

使用expressjs起個(gè)簡(jiǎn)單的后端服務(wù)，先安裝：

mkdir demo cd demo npm init npm install express --save// v4.17.1

然后創(chuàng)建一個(gè)app.js文件，輸入：

const express = require('express') const app = express() app.get('/', (req, res) => {res.send('hello world') }) app.listen(3000, () => {console.log('服務(wù)啟動(dòng)完成') })

然后在命令行輸入：node app.js，訪問(wèn)http://localhost:3000/，頁(yè)面顯示hello world即表示服務(wù)啟動(dòng)成功。

接下來(lái)分別模擬幾種情況：

• 情況1.靜態(tài)圖片

創(chuàng)建一個(gè)public文件夾，隨便拷貝一張圖片比如test.jpg進(jìn)去，然后添加以下代碼：

// ... app.use(express.static('./public')) // app.listen...

瀏覽器訪問(wèn)http://localhost:3000/test.jpg即可看到該圖片。

• 情況2.讀取圖片文件，以流的形式返回

app.get('/getFileStream', (req, res) => {const fileName = req.query.nameconst stream = fs.createReadStream(path.resolve('./public/' + fileName))stream.pipe(res) })

瀏覽器訪問(wèn)http://localhost:3000/getFileStream?name=test.jpg即可訪問(wèn)到該圖片。

• 情況3.讀取圖片文件返回流并添加Content-Disposition響應(yīng)頭

Content-Disposition響應(yīng)頭是MIME協(xié)議的擴(kuò)展，用來(lái)告訴瀏覽器如何處理服務(wù)器發(fā)送的文件，有三種取值：

Content-Disposition: inline// 如果瀏覽器能直接打開(kāi)該文件會(huì)直接打開(kāi)，否則觸發(fā)保存 Content-Disposition: attachment// 告訴瀏覽器以附件的形式發(fā)送，會(huì)直接觸發(fā)保存，會(huì)以接口的名字作為默認(rèn)的文件名 Content-Disposition: attachment; filename="xxx.jpg"// 告訴瀏覽器以附件的形式發(fā)送，會(huì)直接觸發(fā)保存，filename的值作為默認(rèn)的文件名 app.get('/getAttachmentFileStream', (req, res) => {const fileName = req.query.name// attachment方法實(shí)際上設(shè)置了兩個(gè)響應(yīng)頭的值：/*Content-Disposition: attachment; filename="【文件名】"Content-Type: 【文件MIME類(lèi)型】*/res.attachment(fileName); const stream = fs.createReadStream(path.resolve('./public/' + fileName))stream.pipe(res) })

• 情況4.動(dòng)態(tài)生成圖片返回流

我們以生成二維碼為例，使用qr-image這個(gè)庫(kù)來(lái)創(chuàng)建二維碼，添加以下代碼：

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 = 0data.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請(qǐng)求方式

// 解析json類(lèi)型的請(qǐng)求體 app.use(express.json()) // 解析urlencoded類(lèi)型的請(qǐng)求體 app.use(express.urlencoded()) app.post('/getFileStream', (req, res) => {const fileName = req.body.nameconst stream = fs.createReadStream(path.resolve('./public/' + fileName))stream.pipe(res) }) app.post('/getAttachmentFileStream', (req, res) => {const fileName = req.body.nameres.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標(biāo)簽下載

a標(biāo)簽html5版本新增了download屬性，用來(lái)告訴瀏覽器下載該url，而不是導(dǎo)航到它，可以帶屬性值，用來(lái)作為保存文件時(shí)的文件名，盡管說(shuō)有同源限制，但是我實(shí)際測(cè)試時(shí)非同源的也是可以下載的。

對(duì)于沒(méi)有設(shè)置Content-Disposition響應(yīng)頭或者設(shè)置為inline的圖片來(lái)說(shuō)，因?yàn)閳D片對(duì)于瀏覽器來(lái)說(shuō)是屬于能打開(kāi)的文件，所以并不會(huì)觸發(fā)下載，而是直接打開(kāi)，瀏覽器不能預(yù)覽的文件無(wú)論有沒(méi)有Content-Disposition頭都會(huì)觸發(fā)保存：

<!-- 直接打開(kāi) --> <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> <!-- 直接打開(kāi) --> <a href="/createQrCode?text=http://lxqnsys.com/" download target="_blank">二維碼流</a> <!-- 直接打開(kāi) --> <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>

所以說(shuō)如果想用a標(biāo)簽下載圖片，那么要讓后端加上Content-Disposition響應(yīng)頭，另外也必須以流的形式返回，跨域圖片符合這個(gè)要求也可以下載，即使響應(yīng)沒(méi)有允許跨域的頭，但是靜態(tài)圖片即使添加了這個(gè)頭也是直接打開(kāi)：

// 經(jīng)測(cè)試，瀏覽器仍然直接打開(kāi)圖片 app.use(express.static('./public', {setHeaders(res) {res.attachment()} }))

和a標(biāo)簽方式類(lèi)似的還可以使用location.href：

location.href = '/test.jpg' location.href = '/test.zip'

行為和a標(biāo)簽完全一致。

這兩種方式的缺點(diǎn)也很明顯，一是不支持post等其他方式的請(qǐng)求，二是需要后端支持。

二.base64格式下載

a標(biāo)簽支持data:協(xié)議的URL，利用這個(gè)可以讓后端返回base64格式的字符串，然后使用download屬性進(jìn)行下載：

<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>

這個(gè)方式就隨便get還是post請(qǐng)求了，缺點(diǎn)是base64字符串可能會(huì)非常大，傳輸慢以及浪費(fèi)流量，另外當(dāng)然也得后端支持，需要同域或允許跨域。

三.blob格式下載

還是a標(biāo)簽，它還支持blob:協(xié)議的URL，利用這個(gè)可以把響應(yīng)類(lèi)型設(shè)置為blob，然后和base64一樣扔給a標(biāo)簽：

<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>

這個(gè)方式需要和上述幾個(gè)需要通過(guò)ajax請(qǐng)求的一樣，都需要后端可控，即圖片同域或支持跨域。

四.使用canvas下載

這個(gè)方法其實(shí)和方法二和方法三是類(lèi)似的，只是相當(dāng)于把圖片請(qǐ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()// 跨域圖片需要添加這個(gè)屬性，否則畫(huà)布被污染了無(wú)法導(dǎo)出圖片img.setAttribute('crossOrigin', 'anonymous')img.onload = () => {let canvas = document.createElement('canvas')canvas.width = img.widthcanvas.height = img.heightlet 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標(biāo)簽是可以跨域的，但是跨域的圖片繪制到canvas里后無(wú)法導(dǎo)出，瀏覽器會(huì)報(bào)錯(cuò)，可以給img添加crossOrigin屬性，但是，如果圖片沒(méi)有允許跨域的頭加了也沒(méi)用。

五.表單形式下載

對(duì)于post請(qǐng)求方式下載圖片的話，除了使用上述的方法二和方法三之外，還可以使用form表單：

<template><el-button type="primary" @click="formType">from表單下載</el-button></div> </template><script> export default {methods: {formType () {// 創(chuàng)建一個(gè)隱藏的表單const form = document.createElement('form')form.style.display = 'none'form.action = '/getAttachmentFileStream'// 發(fā)送post請(qǐng)求form.method = 'post'form.target = '_blank'document.body.appendChild(form)const params = {name: 'test.jpg'}// 創(chuàng)建input來(lái)傳遞參數(shù)for (let key in params) {let input = document.createElement('input')input.type = 'hidden'input.name = keyinput.value = params[key]form.appendChild(input)}form.submit()form.remove()}} } </script>

使用該方式，圖片流的響應(yīng)頭需要設(shè)置Content-Disposition，否則瀏覽器也是直接打開(kāi)圖片，有該響應(yīng)頭的話跨域圖片也可以下載，即使圖片不允許跨域。

六.ifrmae下載

document.execCommand有一個(gè)SaveAs命令，可以觸發(fā)瀏覽器的另存為行為，利用這個(gè)可以把圖片加載到iframe里，然后通過(guò)iframe的document來(lái)觸發(fā)該命令：

<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>

圖片必須要是同源的，這種方式了解一下就行，因?yàn)樗辉贗E里被支持。

小結(jié)

本文簡(jiǎn)單分析了一下前端下載圖片的各種方式，各位可以根據(jù)實(shí)際需求進(jìn)行選擇，除了最后一種方法，其余方法均未在IE上測(cè)試，有需要的可以自行測(cè)試。

demo代碼在https://github.com/wanglin2/download-image-demo。

總結(jié)

以上是生活随笔為你收集整理的前端下载图片的N种方法的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。