前端文件下载方式

前端文件下载方式

方法一：window.open

只要提供了文件的服务器地址，使用window.open也就是在新窗口打开，这时浏览器会自动执行下载。

window.open(url)

方法二：a标签

<a href="url" download="test">下载文件</a>

方法三：xhr下载

export const exportFile = async (data: FileItem) {
  const res: Blob = await http.post(url, data, {
    responseType: 'blob',
  })
  if (res.type !== 'application/json') return downloadFile(res, data.name);
  const r = await res.text();
  message.error(JSON.parse(r)?.msg);
  return;
}
 
/**
 * 使用bolb方式下载
 * @param res
 * @param filename
 * @returns
 */
export function downloadFile(res: Blob, filename: string) {
  const url = window.URL.createObjectURL(new Blob([res]))
  const a = document.createElement('a')
  a.style.display = 'none'
  a.href = url
  a.download = filename
  document.body.appendChild(a)
  a.click()
  document.body.removeChild(a)
  window.URL.revokeObjectURL(url) // 释放blob对象
}

方法四：saveAs下载

import {saveAs} from 'lodash-es';
 
export function downloadFile(url: string, filename: string, success?: (data: string) => void) {
  if (url && url.trim()) {
    saveAs(url, filename || '未命名文件');
    success;
  } else {
    message.destroy();
    message.error('文件下载路径不能为空！');
  }
}