怎样下载带权限认证的文件？

来源：https://wintc.top/article/31

h5里的a标签有了download属性，可以利用这个属性方便地完成文件下载了。正常情况下，不设置download属性，点击a标签会发生页面跳转，但是加了download就不一样了，点击a标签会把href的内容下载到文件里。

比如，我们想实现点击下载路径为xxx的一张图片，可以简单实现：

<a href="xxx" download="filename">点击下载</a>

这是文件下载最简单的情况，注意这里的xxx只能是同域下的文件，否则还是会打开新的页面。

如果文件接口需要验证权限呢？我们可以先用ajax请求获取文件，然后再将文件内容转为data:URL格式的字符串url，利用这个url和a标签的download属性就可以实现下载功能了。

首先获取文件，这里我使用的是axios这个请求库，这里假设权限认证是通过请求头里设置Authorization传递一个token来完成（如果是其它方式验证权限处理也类似，这只是一个简单的ajax请求）：

function requestFile (url) {
  return axios.get(url, {
    headers: {
      Authorization:  'xxx', // token
    },
    responseType: 'blob'
  }).then(res => res.data)
}

我们通过responseType约定响应数据的类型为blob，现在请求得到的res.data就是一个Blob对象（和文件读取时得到的文件对象一样）。接下来借助FileReader对象读取Blob文件为data:URL格式的字符串:

function blobToDataURL (blob) {
  return new Promise((resolve, reject) => {
    let reader = new FileReader()
    reader.addEventListener('load', () => {
      resolve(reader.result) // reader.result即为包含文件内容的字符串
    })
    reader.readAsDataURL(blob)
  })
}

现在得到了包含文件内容的字符串，可以使用a标签来下载文件内容了：

function downloadFile (url, filename = '默认文件名') {
  requestFile(url).then(blob => {
    blobToDataURL(blob).then(dataURL => {
      let a = document.createElement('a')
      a.download = filename
      a.href = dataURL
      a.click()
    })
  })
}

以上就是解决需要验证权限的文件下载的方法，其实对于文章开头所描述的非同域名的文件（该文件允许跨域），也可以使用同样的方法来下载。