在客户端创建和下载 (html/css/js) 文件

Question

我已经使用 React 构建了一个代码游乐场（类似于 liveweave）。 用户可以保存他们的“代码游乐场”并在以后访问它们。 （使用 firebase db），这个“代码游乐场”仅由 HTML、CSS 和 js 组成。 我试图添加一个允许用户下载 playground 的功能，这个想法是它将生成 3 个单独的文件（一个用于 playground 中的每种语言）

1）有没有办法生成（HTML CSS 和 js）文件并在客户端填充内容？

2) 如果是这样，是否有机会在客户端也将 a.rar 中的这些文件分组？

3）如果在客户端生成这些文件不是最佳解决方案/不可能，您将如何解决这个问题？

我在想也许在一个快速服务器中查询数据库中的数据然后用这些文件响应，但我想尝试一个客户端解决方案

Answer 1

最后决定使用fileSaver.js package

import { saveAs } from "file-saver";
const saveFiles = () => {
    var blob = new Blob([makeHtml(getDocumentCode())], {
      type: "text/plain;charset=utf-8",
    });
    saveAs(blob, `${getFileName()}.html`);
  };

首先，您需要从文件的内容中创建一个 blob，在本例中，它是 HTML +css +js 代码， makeHtml function 处理 HTML 文档的构建方式，然后将该 blob 传递给 saveAs function文件的名称和扩展名，那么您可以使用saveFiles来响应任何事件，例如 onClick

<button onClick={saveFile}>Download<button/>