前端项目使用a标签下载远程文件

最近项目使用到前端下载远程文件的功能，使用到a标签来下载，这里将前端项目使用a标签下载远程文件的过程做个总结：

例如后端给的远程文件地址为：http://127.0.0.1:8088/file-upload/20230829/31b697f8-3729-418d-859c-ac8ae4d03c20.txt

在下载事件中使用a标签直接操作代码如下：

const link = document.createElement('a')
link.style.display = 'none'
link.href = item.fileAddr // 文件地址
link.download = item.fileName // 文件名称
link.click()
return false

这种写法针对不同文件类型有不同展现形式，对于浏览器默认支持预览的类型（比如txt文本和png图片）等格式会直接在浏览器中预览展示而不是直接下载，针对不支持的类型（比如docx文档和xlsx表格）等格式会直接执行下载操作，我们可以通过修改href属性的请求媒体类型来解决这个问题，只需将文件地址改成如下格式即可：

const link = document.createElement('a')
link.style.display = 'none'
link.href = item.fileAddr + '?response-content-type=application/octet-stream' // 文件地址
link.download = item.fileName // 文件名称
link.click()
return false

如上就解决了部分类型是预览而不是直接下载的问题。

注意：这种地址格式可能会遇到download属性设置无效，如上边地址下载文件后文件名为31b697f8-3729-418d-859c-ac8ae4d03c20.txt的情况，这时这种下载方式就不适用了，可以通过先去请求这个地址然后转成blob类型来重新下载，具体实现方式如下：

const request = new window.XMLHttpRequest()
request.open('GET', item.fileAddr, true) // 文件地址
request.responseType = 'blob'
request.onload = () => {
  const url = window.URL.createObjectURL(request.response)
  const link = document.createElement('a')
  link.href = url
  link.download = item.fileName // 文件名称
  link.click()
}
request.send()