解决vue、js 下载图片浏览器默认预览而不是下载

在网页上，如果我们下载的地址对应的是一个jpg文件,txt文件等，点击链接时，浏览器默认的是打开这些文件而不是下载，那么如何才能实现默认下载呢？

后端解决

这就是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
}

解决vue、js 下载图片浏览器默认预览而不是下载

原文：https://www.cnblogs.com/lml-lml/p/13368225.html