文件下载

blob和fileReader如何使用，是什么关系

直接给文件地址会有安全隐患吗？一般是如何处理文件地址的。

前端下载的几种方式，总结一下就是，如果返回的文件格式浏览器不能识别，浏览器就会下载。如果后端处理了响应头Content-Disposition: attachment; filename="filename.xls" ，那也可以下载。

但是还有一种情况，浏览器可以识别的文件格式，后端也没有设置下载的响应头，需要前端自己处理下载的情况。

后端传的是二进制流，前端应该如何通过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)
      })
  }

结果

不加

加

responseType如果不设置，默认值是JSON。从结果来看，responsetype的值不同，axios会对响应的数据进行响应的转换。