前端如何实现文件下载

文件下载主要是通过a标签实现，常见的情况有两种

1、拿到url地址实现文件下载

function downloadFile(url, fileName) {
  const link = document.createElement('a') // 创建一个a元素
  link.herf = url // 设置a元素的目标url
  link.download = fileName // 设置下载的文件名。该属性的意思是当点击时不是导航到目标url而是下载，接受一个文件名。
  link.style.display = 'none' // 设置a元素不可见
  document.body.appendChild(link) // 将a元素插入到页面中
  link.click() // 触发a元素的点击事件，实现下载
  document.body.removeChild(link) // 在页面中删除a元素
}

2、通过文件流实现文件下载

function downloadFileByBlob(data, fileName) {
  const blob = new Blob([data])
  const blobUrl = URL.createObjectURL(blob) // 创建一个blob url
  const link = document.createElement('a') // 创建一个a元素
  link.herf = blobUrl // 设置a元素的目标url
  link.download = fileName // 设置下载的文件名。该属性的意思是当点击时不是导航到目标url而是下载，接受一个文件名。
  link.style.display = 'none' // 设置a元素不可见
  document.body.appendChild(link) // 将a元素插入到页面中
  link.click() // 触发a元素的点击事件，实现下载
  URL.revokeObjectURL(blobUrl) // 释放blob url
  document.body.removeChild(link) // 在页面中删除a元素
}