前端数据流组装指定格式的文件下载

有的时候，我们从后端获取了文件数据，需要在前端组合成指定格式的文件，并下载。

组合文件，除了数据，还需要规定格式，才知道组合成什么格式的文件。

主要代码如下：

/*
*  responseText 后端获取的文件数据
*  这里以 pdf 格式的文件举例，设置 type 为 pdf 文件需要的类型
* */
const blobFile = new Blob([responseText],{
    type: "application/pdf"
});
// 创建 blob 对象的 url 对象
const objectUrl = window.URL.createObjectURL(blobFile);

// 创建 a 标签元素，设置 a 标签的链接地址 和 下载文件名
const aElement = document.createElement("a");
aElement.href = objectUrl;
aElement.download = "list.pdf";
// 触发 a 标签的点击事件
aElement.click();

// url 使用完，撤销url对象
window.URL.revokeObjectURL(objectUrl);

上面代码以 pdf 格式的文件举例，常用的文件格式还有很多，如果要获取后端传过来的文件格式的对应 type，还可以通过一个函数来判断并返回正确的type值，如下：

/*
* fileSuffix 文件名的后缀
* */
function getMIME( fileSuffix ){
    switch ( fileSuffix ){
        case 'txt': return 'text/plain'; break;
        case 'doc': return 'application/msword'; break;
        case 'xls': return 'application/vnd.ms-excel'; break;
        case 'ppt': return 'application/vnd.ms-powerpoint'; break;
        case 'pdf': return 'application/pdf'; break;
        case 'gif': return 'image/gif'; break;
        case 'png': return 'image/png'; break;
        case 'jpg': return 'image/jpeg'; break;
        case 'jpeg': return 'image/jpeg'; break;
        case 'bmp': return 'image/bmp'; break;
        case 'avi': return 'video/x-msvideo'; break;
        case 'mvb': return 'application/x-msmediaview'; break;
        case 'htm': return 'text/html'; break;
        case 'html': return 'text/html'; break;
        case 'svg': return 'image/svg+xml'; break;
        case 'tar': return 'application/x-tar'; break;
        case 'zip': return 'application/zip'; break;
        case 'exe': return 'application/octet-stream'; break;

        default: return '';
    }
}

更多MIME类型可以参考文档：MIME 类型（IANA 媒体类型）

上面例子中只是简单的使用了 Blob 对象，如果了解更多的使用方法，可以参考：Blob

可以发现上面组建文件的方法比较原始，也比较麻烦，我们可以使用更简单的方法：第三方库，比如 FileSaver 。

只需要安装一下：

npm install file-saver --save

如果你使用 TypeScript，需要执行下面的命令：

npm install @types/file-saver --save-dev

就可以使用了：

import { saveAs } from 'file-saver';

let FileSaver = require('file-saver');
let blobFile = new Blob(responseText, { type: "text/plain;charset=utf-8" });
  // saveAs: 触发文件下载，同时指定下载的文件名
FileSaver.saveAs( blobFile, "hello.txt");