react的UI中的数据以文件的形式保存答案

【问题标题】：Save the data in the UI of react in the form of filereact的UI中的数据以文件的形式保存
【发布时间】：2022-09-24 21:01:44
【问题描述】：

我正在从API 读取数据并下载file。我想在react 应用程序的public 文件夹中保存相同的file。

 this.state = {
      fileDownloadUrl: null,
      fileName: \'\',
    };

下面是方法。

 downLoadFile(e) {
    e.preventDefault();
    axios
      .get(
        \'http://localhost:8080/file_download/en\'
      )
      .then((res) => {
       var output = res.data;
        const blob = new Blob([output]);
        const fileDownloadUrl = URL.createObjectURL(blob);
        this.setState({ fileDownloadUrl: fileDownloadUrl }, () => {
          this.dofileDownload.click();
          URL.revokeObjectURL(fileDownloadUrl);
          this.setState({ fileDownloadUrl: \'\' });
        });
      });
  }

下载文件的代码。

           <a
            className=\"hidden\"
            download={this.state.fileName + \'.json\'}
            href={this.state.fileDownloadUrl}
            ref={(e) => (this.dofileDownload = e)}
          >
            download it
          </a>

无论如何我可以修改code 以便file 可以保存在react 应用程序的public 文件夹中。稍后此文件将用于翻译。

标签： javascript reactjs react-native react-redux react-hooks

【解决方案1】：

无法从浏览器中运行的前端应用程序自动下载文件并将其保存在硬盘上的特定位置。您的应用程序的用户将根据他们的浏览器设置决定文件的保存方式。

如果你试图实现那种事情，那是错误的，你应该考虑另一种方法。

【讨论】：

你能帮我解决这个问题吗？ stackoverflow.com/questions/70432739/…

【解决方案2】：

这是不可能的，因为这会带来安全风险。

大多数操作系统将默认下载到下载文件夹。

纯浏览器-JavaScript 无法获取有关用户文件系统的信息。默认下载路径也可能包含敏感信息，这是有风险的。

【讨论】：

你能建议一些解决方法吗？
我假设您只需要很少的语言环境来保存，而不是将您的语言环境下载为文件。您可以使用浏览器本地存储以 JSON 格式保存。参考文档developer.mozilla.org/en-US/docs/Learn/JavaScript/…

【解决方案3】：

总结这个问题，挑战是获取或以其他方式生成某些静态文件资产以供 React 使用。

正如其他答案所指出的那样，React 本身是不可能做到的。我想补充一下，如果可能的话，那将是低效、不安全和不安全的。

在架构上，最好创建一个文件生成脚本并在 React 应用程序的 build 步骤之前运行它。

我自己是using 这样的设置。例如，如果你检查了我的 package.json 我有脚本：

{
  "scripts": {
    "--------- BUILD ---------": "",
    "build": "npm run ops && run-s build:*",
    "build:remix": "remix build",
    "build:css": "npm run generate:css",
    "--------- DEV ---------": "",
    "dev": "npm run ops && run-p dev:*",
    "dev:remix": "cross-env NODE_ENV=development remix dev",
    "dev:css": "npm run generate:css -- --watch",
    "generate:css": "sass styles:app/styles app/components",
    "format": "prettier --write .",
    "--------- TEST ---------": "",
    "start:mocks": "cross-env NODE_ENV=production node --require ./mocks --require dotenv/config ./build/server.js",
    "test": "vitest run --coverage",
    "test:e2e:dev": "start-server-and-test dev http://localhost:3000 \"cypress open\"",
    "pretest:e2e:run": "npm run build",
    "test:e2e:run": "cross-env PORT=8811 start-server-and-test start:mocks http://localhost:8811 \"cypress run\"",
    "--------- LINT ---------": "",
    "lint": "eslint --cache --cache-location ./node_modules/.cache/eslint .",
    "typecheck": "tsc -b && tsc -b cypress",
    "validate": "run-p \"test -- --run\" lint typecheck test:e2e:run",
    "--------- OPS ---------": "",
    "ops": "run-p ops:*",
    "ops:static": "node ./ops/extract-static-data.mjs",
    "ops:search": "node ./ops/extract-search.mjs",
    "ops:rss": "node ./ops/extract-rss.mjs"
  }
}

注意ops 脚本组是如何在 React 构建步骤之前触发的。我生成静态新鲜文件：

aside 的所有 h2 标题字符串的集合，用于设置当前活动的锚点
所有文章的所有 MDX 前端内容块，用于在正常路线之外渲染 MDX（文章列表、搜索等）
RSS 提要的最终 HTML；我用所有的注释来渲染 HTML，比如语法标题、语法高亮和排版
为fuse.js 编译搜索数据文件和索引文件（用于热启动）

我也会以这种方式获取语言环境：npm 触发的脚本将获取并atomically 将文件直接保存到/public/。

期间完成构建时间而不是运行简化设置并降低服务器费用。在这方面我不同意Mr. Dodds；更重要的是，mdx-bundler 等运行时库甚至不支持纯 ESM，因此实际上，面向运行时的方法通常甚至不起作用。例如，如果您使用 Dodds 先生的同一个博客，则它在单个帖子或站点范围的搜索或自动排版处理中没有当前的锚点跟踪。

PS。有趣的是，如果您查看静态站点生成器，11ty 可以让您从 11ty config itself 获取额外的资源，这就是您在 11ty 上获取您的语言环境的地方。

【讨论】：