【前端文件下载】Js Vue 下载文件的最常用两种方式

目录

1、第一种 文件流格式下载

 2、通过静态url去实现下载

目前 前端下载文件最常用的有以下两种方式：

（1）通过接收后端返回的文件流格式（Blob数据） 去下载

（2）通过接收后端给的文件url地址去下载

1、第一种 文件流格式下载

这种情况通常是 我们前端 向后端发起下载请求 ，后端接收到之后 会返回文件流格式（Blob数据）的代码，然后我们通过new Blob() 方法传入Blob数据 ,接着把得到的数据传入window.URL.createObjectURL（） 最后得到url。我们创建一个a标签，然后将url赋值给a标签的href,接着使用link.setAttribute（）方法 设置文件名称，将设置的link数据添加的a标签节点上   link.click();触发点击事件,最后移除a标签上的link

/**
 *
 * @param {*} data 文件数据
 * @param {*} fileName 文件名称
 * @param {*} fileFormat 文件格式
 * @returns
 */
export default function exportDownload(data, fileName = '导出文件', fileFormat = 'xlsx') {
  // data为Blob数据
  if (!data) {
    return;
  }
  // 执行下载
  const url = window.URL.createObjectURL(new Blob([data]));
  console.log(url);
  const link = document.createElement('a');
  link.style.display = 'none';
  link.href = url;
  link.setAttribute('download', `${fileName}.${fileFormat}`);
  document.body.appendChild(link);
  link.click();
  document.body.removeChild(link);
}

 2、通过静态url去实现下载

这种方式，同样我也是用a标签去实现的，首先是创建一个a标签 const elt = document.createElement('a'); 接着设置a标签上的href属性 传入url,以及download 属性传入文件名称，将设置的link数据添加的a标签节点上   link.click();触发点击事件,最后移除a标签上的link

/**
 *
 * @param {*} url 文件路径
 * @param {*} name 文件路径
 * @returns
 */
export default function downloadFile(url, name) {
  const elt = document.createElement('a');
  elt.setAttribute('href', fileDownload(url));
  elt.setAttribute('download', name);
  elt.style.display = 'none';
  document.body.appendChild(elt);
  elt.click();
  document.body.removeChild(elt);
}