任意文件下载包含https的图片

原创

朦胧淡月 2022-09-01 20:24:56 博主文章分类：文件上传下载 ©著作权

©著作权归作者所有：来自51CTO博客作者朦胧淡月的原创作品，请联系作者获取转载授权，否则将追究法律责任

使用a标签进行下载

 <a href="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png">下载</a>

出现的问题

如果使用a标签指向一个图片，
你会发现点击链接时它会直接在浏览器中打开图片并显示.
并不是下载到本地，与我们的初衷相违背
我们应该如何去解决这个问题了。

尝试了将图片转成Base64或者Blob的办法

function downloadImgByBlob(url) {
    var img = new Image()
    img.onload = function() {
        var canvas = document.createElement('canvas')
        canvas.width = img.width
        canvas.height = img.height
        var ctx = canvas.getContext('2d')
        // 将img中的内容画到画布上
        ctx.drawImage(img, 0, 0, canvas.width, canvas.height)
        // 将画布内容转换为Blob
        canvas.toBlob((blob) => {
            // blob转为同源url
            var blobUrl = window.URL.createObjectURL(blob)
            // 创建a链接
            var a = document.createElement('a')
            a.href = blobUrl
            a.download = ''
            // 触发a链接点击事件，浏览器开始下载文件
            a.click()
        })
    }
img.src = url
// 必须设置，否则canvas中的内容无法转换为blob
img.setAttribute('crossOrigin', 'Anonymous')
}

function downloadImgByBase64(url) {
    var img = new Image()
    img.onload = function() {
        var canvas = document.createElement('canvas')
        canvas.width = img.width
        canvas.height = img.height
        var ctx = canvas.getContext('2d')
        // 将img中的内容画到画布上
        ctx.drawImage(img, 0, 0, canvas.width, canvas.height)
        // 将画布内容转换为base64
        var base64 = canvas.toDataURL()
        // 创建a链接
        var a = document.createElement('a')
        a.href = base64
        a.download = ''
        // 触发a链接点击事件，浏览器开始下载文件
        a.click()
    }
    img.src = url
    // 必须设置，否则canvas中的内容无法转换为base64
    img.setAttribute('crossOrigin', 'Anonymous')
}

出现的问题

上述两种方法效果都不太理想。因为这两种方法仅支持生成jpeg和png格式图片。如果是gif图，仅能显示第一帧的内容

通过XMLHttpRequest()请求图片链接

<button @click="myFileDownLoad"> 下载</button>

myFileDownLoad(){
  var x=new XMLHttpRequest();
  x.open("GET", "https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=1986179278,1118313821&fm=27&gp=0.jpg", true);
  x.responseType = 'blob';
  x.onload=function(){
      var url = window.URL.createObjectURL(x.response)
      var a = document.createElement('a');
      a.href = url
      a.download = '你的下载'
      a.click()
  }
  x.send();
}

该示例的思路是，通过XMLHttpRequest()请求图片链接，然后获取返回的Blob。那结合上面下载图片的方法，就能下载图片了:
通过这种方法下载图片，gif图也能够显示正常了。
注意，上述方法能够兼容大部分浏览器，但是不兼容IE浏览器(不支持download属性)。要兼容IE浏览器需要用其他办法。
下载的链接好像要是https的才行 （我下载的都是https的图片）

ps:语法
objectURL = URL.createObjectURL(object);
参数object；用于创建 URL 的 File 对象、Blob 对象或者 MediaSource(媒体资源) 对象。
返回值：该URL可用于指定源 object的内容

文件下载既可以下载图片又可以任意文件类型[xls，word,mp4]

function downLoad(item) {
//filePathUrl是一个https的地址哈。
            if (item.filePathUrl) {
                // 下载https的图片
                let fileType = item.fileName.split('.').pop()
                let canDownFileType = ['jpg', 'png', 'gif', 'webp', 'jpeg']
                if (canDownFileType.indexOf(fileType) != -1) {
                    // 下载的是图片
                    var x = new XMLHttpRequest()
                    x.open('GET', item.filePathUrl, true)
                    x.responseType = 'blob'
                    x.onload = function (e) {
                        var url = window.URL.createObjectURL(x.response)
                        var a = document.createElement('a')
                        a.href = url
                        a.download = item.fileName //图片的下载名称
                        a.click()
                    }
                    x.send()
                } else {
                    // // 下载的是文件类型的，
                    var url = item.filePathUrl
                    var xhr = new XMLHttpRequest()
                    xhr.open('GET', url, true)
                    xhr.responseType = 'blob'
                    xhr.onload = function () {
                        if (xhr.status === 200) {
                            var blob = xhr.response
                            var link = document.createElement('a')
                            var body: any = document.querySelector('body')
                            link.href = window.URL.createObjectURL(blob)
                            link.download = item.fileName
                            link.style.display = 'none'
                            body.appendChild(link)
                            link.click()
                            body.removeChild(link)
                        }
                    }
                    xhr.send()
                }
            } else {
                window.$message.error('资源地址不存在')
            }
        }

继续优化可以通过http下载任意文件

function downLoad = (url, item) => {
  var xhr = new XMLHttpRequest()
  xhr.open('GET', url, true)
  xhr.responseType = 'blob'
  xhr.onload = function () {
    if (xhr.status === 200) {
      var blob = xhr.response
      var link = document.createElement('a')
      var body: any = document.querySelector('body')
      link.href = window.URL.createObjectURL(blob)
      link.download = item.name
      link.style.display = 'none'
      body.appendChild(link)
      link.click()
      body.removeChild(link)
    }
  }
  xhr.send()
}