代码之家 › 专栏 › 技术社区 › J. Hesters

混音:文件下载

remix.run

0

J. Hesters · 技术社区 · 3 年前

我想允许我的用户下载一个文本文件。

在混音中我该怎么做?

我尝试通过资源路由公开txt文件,但随后用户导航离开页面。但我希望文件只是下载,或者让他们选择一个下载位置。无论如何,我希望用户留在页面上。

1 回复 | 直到 3 年前

1

5

Ada Boese 2 年前

我只需要想办法为我正在构建的应用程序做到这一点。

简而言之,您需要设置 Content-Disposition 标题为“附件”。这将强制下载。

然后,您将构建一个响应,以流式传输您想要下载的文档。

以下是一个端到端的示例:

import { createReadableStreamFromReadable } from '@remix-run/node';
import { Readable } from 'node:stream';

export const loader = async () => {
  const file = createReadableStreamFromReadable(
    Readable.from(['Hello, World!']),
  );

  return new Response(file, {
    headers: {
      'Content-Disposition': 'attachment; filename="hello.md"',
      'Content-Type': 'text/markdown',
    },
  });
};

这里我用 Readable.from(['Hello, World!']) 构造文件,但这可能是 fs.readFile 等

你把所有这些都放在 _route.ts 由您选择。

从应用程序链接到此资源路由时,您需要添加 reloadDocument attribute 到链接,例如。

<Link to="/download" reloadDocument />

这将强制使用浏览器导航,而不是客户端导航。

2

1

HerrSiering 3 年前

如果使用标准 a 标记,如果添加 download 其属性=> https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#attr-download

然后,您可以链接到生成txt文件的资源路由,下载应该可以按预期进行。

也许这甚至适用于混音/反应路由器 Link 组件,但我目前只是在打电话,所以无法测试这个。无论如何,一个标准的锚点标签应该可以工作。