需求

后台需要根据选定的 厂商和设备型号，生成对应的excel表格模版
通过接口返回文件流，采用blob接收

image.png

问题

直接将blob文件流存储为指定文件名，前端还要自己起个名字
后在接口response的header中发现了如下参数content-disposition，那么优雅的保存blob的文件就有了方法

image.png

代码

//axios的请求方式
axios({
        url: url+"?a=1&b=2",
        method: "get",
        responseType:'blob'
      })
        .then( res => {
          let fileName = (res.headers['content-disposition'].split("="))[1]
          let blob = res.data
            if (typeof window.navigator.msSaveBlob !== 'undefined') {
                /*
                  * For IE
                  * >=IE10
                  */
                window.navigator.msSaveBlob(blob, fileName);
            } else {
                /*
                  * For Non-IE (chrome, firefox)
                  */
                var URL = window.URL || window.webkitURL;
                var objectUrl = URL.createObjectURL(blob);
                if (fileName) {
                    var a = document.createElement('a');
                    if (typeof a.download === 'undefined') {
                        window.location = objectUrl;
                    } else {
                        a.href = objectUrl;
                        a.download = fileName;
                        document.body.appendChild(a);
                        a.click();
                        a.remove();
                    }
                } else {
                    window.location = objectUrl;
                }
            }
        })
        .finally(r => {
        });