在網頁上，如果我們下載的地址對應的是一個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
}