前端下载文件方法

export default {
  // 下载 Excel 方法
  excel(data, fileName) {
    this.download0(data, fileName, 'application/vnd.ms-excel');
  },

  // 下载 Word 方法
  word(data, fileName) {
    this.download0(data, fileName, 'application/msword');
  },

  // 下载 Zip 方法
  zip(data, fileName) {
    this.download0(data, fileName, 'application/zip');
  },

  // 下载 Html 方法
  html(data, fileName) {
    this.download0(data, fileName, 'text/html');
  },

  // 下载 Markdown 方法
  markdown(data, fileName) {
    this.download0(data, fileName, 'text/markdown');
  },

  download0(data, fileName, mineType) {
    // 创建 blob
    let blob = new Blob([data], {type: mineType});
    // 创建 href 超链接，点击进行下载
    window.URL = window.URL || window.webkitURL;
    let href = URL.createObjectURL(blob);
    let downA = document.createElement("a");
    downA.href = href;
    downA.download = fileName;
    downA.click();
    // 销毁超连接
    window.URL.revokeObjectURL(href);
  },

}

前端导出后端返回这种格式

可使用上面方法进行导出

      const res=await warehouseLoggingExport(obj)
      this.$download.excel(res, '出入库记录.xls');

在请求参数里面一定得加 responseType: 'blob'

还有一种情况是针对oss这种网络路径的文件 

使用 XMLHttpRequest 或 Fetch API 请求文件，然后将文件内容写入到 Blob 对象中，并使用 URL.createObjectURL() 创建下载链接

      fetch(data.fileUrl)//文件地址
        .then(response => response.arrayBuffer())
        .then(buffer => {
          const blob = new Blob([buffer], { type: 'application/pdf' });
          const url = window.URL.createObjectURL(blob);
          const a = document.createElement('a');
          a.href = url;
          a.download = data.fileName;//文件名
          document.body.appendChild(a);
          a.click();
          window.URL.revokeObjectURL(url);
        });