图片链接进行下载而不是预览

前端得到图片链接进行下载而不是预览

这是来自博客园的一篇文章

博客园地址：解决vue、js 下载图片浏览器默认预览而不是下载 - 李美玲 - 博客园 (cnblogs.com)

方法

后端解决

这就是Content-Disposition设置的问题，如下都是java示例：

设置为inline,如果浏览器支持该文件类型的预览，就会打开，而不是下载：

response.setHeader("Content-Disposition", "inline; filename=111.jpg");

设置为attachment,浏览器则直接进行下载，纵使他能够预览该类型的文件。

response.setHeader("Content-Disposition", "attachment; filename=111.jpg");

特别说明：Chrome不设置Content-Type也会自动打开，如果是它可识别预览的文件。

前端解决

downloadIamge(imgsrc, name) {
  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')
    var a = document.createElement('a')
    var event = new MouseEvent('click')
    a.download = name || 'photo'
    a.href = url
    a.dispatchEvent(event)
  }
  image.src = imgsrc
}