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

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()
    })
  })
}

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

¥赞赏