前端点击下载图片打开新标签页处理

4 阅读1分钟

之前的好多方法都是用A标签直接下载,可是这样会打开新标签页展示图片,而不是下载图片。查资料发现是因为当前网址和图片地址不同源导致的。 改用fetch获取blob再下载就能直接下载图片了

/**
 * 根据资源url下载文件
 * @param url
 * @param fileName
 */
export async function download (url: string, fileName = ''): Promise<void> {
  try {
    const response = await fetch(url)
    const blob = await response.blob()
    const aLink = document.createElement('a')
    aLink.style.display = 'none'
    aLink.download = fileName
    aLink.href = URL.createObjectURL(blob)
    document.body.appendChild(aLink)
    aLink.click()
    document.body.removeChild(aLink)
    URL.revokeObjectURL(aLink.href)
  } catch (error) {
    console.error(error)
  }
}