解決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
}