a标签下载同源或不同源文件的实现方法

场景一： 文件的url地址和当前访问网址同源

export const downLoadFileByUrl = ({ url, name }) => {
  const link = document.createElement('a')
  link.href = url
  link.download = name
  link.click()
  link.remove()
}

同源时，通过download设置下载文件名称是有效的，当不同源时download设置文件名称为无效
且下载进度会在浏览器最近下载记录中从0% 走到 100%

场景二：文件的url地址和当前访问网址不同源

import { Loading } from 'element-ui'
export const downLoadFileByUrl = ({ url, name }) => {
    const loading = Loading.service({
        text: '下载文件中,请耐心等待...',
        background: 'rgba(0, 0, 0, 0.4)'
    })
    fetch(url)
        .then((response) => response.blob())
        .then((result) => {
            const objectUrl = window.URL.createObjectURL(result)
            const link = document.createElement('a')
            link.href = objectUrl
            link.download = name
            link.click()
            link.remove()
            window.URL.revokeObjectURL(objectUrl)
            loading.close()
        })
}

不同源的情况时，需要先请求数据，然后再用a标签下载，这种情况，一开始下载进度不会出现在浏览器的最近下载记录中，只在下载到100%时，才展示在浏览器的下载记录中，所以最好加上loading,以防文件过大下载时间长而导致的无反应问题。