【记录一次前端图片下载问题】解决跨域+直接下载

近日有个需求需要下载协议照片，使用的是阿里云的oss，由于无法协调后端那边配置跨域响应头，找了很多方案都不理想，终于在摸索下可以实现完美下载

常见方案有两个问题
1.图片格式(png,jpg等)不会触发下载，直接打开预览
2.跨域问题

先捋一下常见方案

方法一、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里被支持。

究极解决方案

// 调用方式// 参数一： src// 参数二： 图片名称，可选const downloadImage = (imgsrc, name) => {  // 这里是核心，crossOrigin+带参数的可以解决跨域问题，少一个都会有问题  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编码数据    var a = document.createElement('a') // 生成一个a元素    var event = new MouseEvent('click') // 创建一个单击事件    a.download = name || 'photo' // 设置图片名称    a.href = url // 将生成的URL设置为a.href属性    a.dispatchEvent(event) // 触发a的单击事件  }  image.src = imgsrc}

本文链接：https://www.kjpai.cn/news/2024-04-05/154305.html，文章来源：网络cs，作者：往北，版权归作者所有，如需转载请注明来源和作者，否则将追究法律责任！