解决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 下载图片浏览器默认预览而不是下载

上一篇:web之jquery


下一篇:FastJson--SerializerFeature.PrettyFormat 如何实现格式化源码查看