下载

后端传的是二进制流,前端应该如何通过blob处理二进制文件流格式流,并实现前端下载文件流格式

1.加和不加responseType: 'blob'的区别

前提:axios请求图片下载地址

function handleDownload() {
    axios({
      url: 'http://localhost:3001/saveImg',
      // responseType: 'blob',//axios请求配置中设置和不设置responseType
      method: 'get'
    })
      .then(data => {
        console.log(data)
        const blog = new Blob([data.data], {
          type: 'image/jpeg'
        }) // 将data数据转为blob对象
        const url = window.URL.createObjectURL(blog) // 将blob对象转为blob地址
        console.log(url)
        // 创建DOM实现下载
        // let a = document.createElement('a')
        // a.download = 'img01.jpg'
        // a.href = url
        // a.click()
      }).catch(err => {
        console.error(err)
      })
  }

结果

不加

为什么图片文件通过打开img是打开新窗口进行预览,而,下载img这样就是进行下载?下载html是打开新窗口进行预览,下载html加了download属性是进行下载。

你可能感兴趣的:(下载)