如何将文本内容保存为文件

背景

    需要将文本文案保存为文件。比如配置文件，像这种访问频率低，不适合将所有用户的配置都保存一份文件在服务器，会造成大量服务器存储浪费。该场景下，当用户访问时，动态生成一份配置文本，然后交由前端进行download操作保存文件，此方式会更加合适。

技术原理

    利用 Blob 将文本内容转换为支持文件操作的二进制对象，再利用 window.URL.createObjectURL 方法把一个blob转化为一个 Blob URL，并且用做文件下载或者图片显示的链接。saveBlob 示例如下。

const config = {
    msg: '这是一段将要被保存的文案'
};

const saveBlob = (blob: Blob, fileName: string) => {
    const url = window.URL.createObjectURL(blob);
    const a = document.createElement('a');
    
    a.href = url;
    a.download = fileName;
    
    // document.body.appendChild(a); 如无需展示，该操作可省略。
    
    a.click();
    window.URL.revokeObjectURL(url);
};

const blob = new Blob(
    [JSON.stringify(obj, null, 2)],
    { type: "application/json" }
);

saveBlob(blob, 'config.json');

参考文献或文章

• MDN 手册：Blob
• 个人笔记：Blob学习记录，详解