6種實(shí)現(xiàn)前端下載圖片的方法匯總
來(lái)源 | https://www.cnblogs.com/wanglinmantan/p/15088419.html
先起個(gè)服務(wù)
mkdir democd demonpm initnpm 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// 如果瀏覽器能直接打開該文件會(huì)直接打開，否則觸發(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類型】*/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類型的請(qǐng)求體app.use(express.json())// 解析urlencoded類型的請(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ō)是屬于能打開的文件，所以并不會(huì)觸發(fā)下載，而是直接打開，瀏覽器不能預(yù)覽的文件無(wú)論有沒(méi)有Content-Disposition頭都會(huì)觸發(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>
所以說(shuō)如果想用a標(biāo)簽下載圖片，那么要讓后端加上Content-Disposition響應(yīng)頭，另外也必須以流的形式返回，跨域圖片符合這個(gè)要求也可以下載，即使響應(yīng)沒(méi)有允許跨域的頭，但是靜態(tài)圖片即使添加了這個(gè)頭也是直接打開：
// 經(jīng)測(cè)試，瀏覽器仍然直接打開圖片app.use(express.static('./public', {setHeaders(res) {res.attachment()}}))
和a標(biāo)簽方式類似的還可以使用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)類型設(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í)和方法二和方法三是類似的，只是相當(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è)屬性，否則畫布被污染了無(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，否則瀏覽器也是直接打開圖片，有該響應(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
感謝閱讀。
學(xué)習(xí)更多技能
請(qǐng)點(diǎn)擊下方公眾號(hào)
