vue实现文件流形式的导出下载全过程

import axios from 'axios';

export default {
  methods: {
    downloadFile() {
      axios({
        method: 'get',
        url: 'your-file-endpoint',  // 替换为实际的文件流接口
        params:{},
        responseType: 'blob'
      })
      .then(response => {
        this.handleFileDownload(response.data);
      })
      .catch(error => {
        console.error('Error downloading the file', error);
      });
    }
  }
};

methods: {
	  /**
	 * 拿到文件流后的下载的方法
	 * @param {*} data
	 * @param {*} filename
	 * @param {*} mime
	 * @param {*} bom
	 */
	 function downloadByData(data: BlobPart, filename: string, mime?: string, bom?: BlobPart) {
	  const blobData = typeof bom !== 'undefined' ? [bom, data] : [data];
	  const blob = new Blob(blobData, { type: mime || 'application/octet-stream' });
	  if (typeof window.navigator.msSaveBlob !== 'undefined') {
	    window.navigator.msSaveBlob(blob, filename);
	  } else {
	    const blobURL = window.URL.createObjectURL(blob);
	    const tempLink = document.createElement('a');
	    tempLink.style.display = 'none';
	    tempLink.href = blobURL;
	    tempLink.setAttribute('download', filename);
	    if (typeof tempLink.download === 'undefined') {
	      tempLink.setAttribute('target', '_blank');
	    }
	    document.body.appendChild(tempLink);
	    tempLink.click();
	    // 移除 a 标签
	    document.body.removeChild(tempLink);   
	     // 释放 URL 对象
	    window.URL.revokeObjectURL(blobURL);
	  }
	}
}

<template>
  <div>
    <button @click="downloadFile">Download File</button>
  </div>
</template>
<script lang="ts" setup>

  // 下载
async function downloadFile() {
    try {
       axios({
        method: 'get',
        url: 'your-file-endpoint',  // 替换为实际的文件流接口
        params: {},   // 请求参数
        responseType: 'blob'
    }).then(
        (response) => {
          console.log('downloadByData',response)
          if(response.headers['content-disposition']) {
            let fileName = response.headers['content-disposition'].split('filename=')[1];
            // console.log('filename',fileName)
            fileName = fileName.replace(/"/g, '');
            downloadByData(response.data,fileName)
          } else {
            downloadByData(response.data,'xiazai.xlsx')
          }          
        }
      )
    } catch (e) {
      console.log(e);
    }
  }
  
  
  /**
 * 拿到文件流后的下载的方法
 * @param {*} data
 * @param {*} filename
 * @param {*} mime
 * @param {*} bom
 */
 function downloadByData(data: BlobPart, filename: string, mime?: string, bom?: BlobPart) {
  const blobData = typeof bom !== 'undefined' ? [bom, data] : [data];
  const blob = new Blob(blobData, { type: mime || 'application/octet-stream' });
  if (typeof window.navigator.msSaveBlob !== 'undefined') {
    window.navigator.msSaveBlob(blob, filename);
  } else {
    const blobURL = window.URL.createObjectURL(blob);
    const tempLink = document.createElement('a');
    tempLink.style.display = 'none';
    tempLink.href = blobURL;
    tempLink.setAttribute('download', filename);
    if (typeof tempLink.download === 'undefined') {
      tempLink.setAttribute('target', '_blank');
    }
    document.body.appendChild(tempLink);
    tempLink.click();
    document.body.removeChild(tempLink);
    window.URL.revokeObjectURL(blobURL);
  }
}


</script>