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

这篇具有很好参考价值的文章主要介绍了【记录一次前端图片下载问题】解决跨域+直接下载。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

近日有个需求需要下载协议照片,使用的是阿里云的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里被支持。文章来源地址https://www.toymoban.com/news/detail-856518.html

究极解决方案

// 调用方式
// 参数一: 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
}

到了这里,关于【记录一次前端图片下载问题】解决跨域+直接下载的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包