文件流方式下载文件(导出）_文件流下载文件

浏览器下载策略

由于浏览器的策略问题，当文件类型为 pdf 或 jpg 等类型时，浏览器会默认进行预览，即使你设置了 download 属性，大多数浏览器都仍然会执行预览。
要想直接下载 pdf 或 jpg 之类的文件，就需要了解浏览器的文件策略。浏览器在文件请求中的 Content-Type 中可以获取到文件的类型，比如 pdf 的请求返回的 Content-Type: application/pdf，浏览器判断文件为 pdf ，则会自动执行预览的策略，如果我们在后端代码或nginx中设置其 Content-Type: application/octet-stream 则浏览器将会该文件识别为文件流，自动执行下载操作。

解决手段

通过一个get请求，将静态文件转换为文件流然后再进行下载

<el-button type="primary" @click="toDownload">下载</el-button>
1

1.新建a标签

 private toDownload() {
    if (this.filePath[0]) {
      let fileUrl = 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg';
      //鉴权
      const sessionData: any = sessionStorage.getItem("token");
      const tokenHead: any = sessionStorage.getItem("headerType");
      let data: any = {
        method: 'GET',
        url: fileUrl,
        responseType: 'blob'// 设置返回的数据类型
        headers: { Authorization: tokenHead + sessionData },
      };
      axios(data).then((res: any) => {
        if('download' in document.createElement('a')){
          let blob = res.data;
          const downloadElement = document.createElement('a');
          downloadElement.href = URL.createObjectURL(blob);
          downloadElement.download = this.fileContent.fileName;
          downloadElement.target = '_blank';
          document.body.appendChild(downloadElement);
          downloadElement.click();
          document.body.removeChild(downloadElement);
        }else{
          var blob = new Blob([content]);
          navigator.msSaveBlob(blob,fileName)
        }
      });
    }
  }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

2.新建input标签

const uploadClick = () => {
  const inputEle = document.createElement("input");
  inputEle.type = "file";
  inputEle.accept =
    "application/vnd.ms-excel,application/vnd.openxmlformats-officedocument.spreadsheetml.sheet";
  inputEle.onchange = (ev: any) => {
    if (ev.target.files.length == 0) return;
    const upFile =ev.target.files[0];
    if (upFile.size > 1024 * 1024 * 10) {
      ElMessage.error("上传文件大小不能超过10M");
      return;
    }
    const formData = new FormData();
    formData.append("file", upFile);
    areaUpload(formData).then((res: Result) => {
      //……
    });
  };
  inputEle.click();
};
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

Blob 构造函数

简述：使用 Blob 构造函数可以直接在客户端上创建和操作 Blob（通常等效于一个文件）。
使用：

//创建
var blobObject = new Blob(["I scream. You scream. We all scream for ice cream."]); 
1
2

//msSaveBlob：只提供一个保存按钮
window.navigator.msSaveBlob(blobObject, 'msSaveBlob_testFile.txt');
1
2

//msSaveOrOpenBlob：提供保存和打开按钮
window.navigator.msSaveOrOpenBlob(blobObject, 'msSaveBlobOrOpenBlob_testFile.txt');
1
2