前几天一个简略的下载图片的需要折腾了我后端大佬好几天，最终还是须要前端来搞，开始说不行的笔者最初又行了，所以趁着这个机会来总结一下下载图片到底有多少种办法。
先起个服务
应用expressjs起个简略的后端服务，先装置：
mkdir democd demonpm initnpm 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上测试，有须要的能够自行测试。
demo代码在https://github.com/wanglin2/download-image-demo。