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

2023-11-14  本文已影响0人  乐宝呗

场景一: 文件的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,以防文件过大下载时间长而导致的无反应问题。

上一篇 下一篇

猜你喜欢

热点阅读