在React组件的锚标签中下载属性

Question

我将文件存储在云中，因此在上传过程中，它们会得到前缀，从而使它们的名称唯一。例如，如果我上传一个名为的文件test.txt，则在上传过程中该文件将另存为7ea205f01ae5_test.txt。请务必注意，我确实捕获并保存了原始文件名。

在我的React组件中，我试图通过使用download属性使其变得用户友好，以便当用户单击以下载文件时，该文件将被下载为，test.txt但无法正常工作。该文件仍以下载7ea205f01ae5_test.txt。

这就是我的React代码的样子

<a href={fileUrl} download={origName}>{fileName}</a>

我的组件看起来像这样的对象：

{
  id: 123,
  fileName: "7ea205f01ae5_test.txt",
  origName: "test.txt",
  fileUrl: "https://myBlobStorageUrl.com/container/7ea205f01ae5_test.txt?signature=123abcxyz"
}

请注意，fileUrl包含一个安全访问签名，该签名允许用户访问文件。没有它，用户将无权访问该文件。

我需要怎么做才能将文件下载为test.txt？

Answer 1

正如DroidNoob提到的，这并非React所独有。给定文件名和扩展名的任何跨源链接都将在服务器上下载，但是该download属性将在相同的源上工作。

// Domain: example.org

// Downloads as 281c2df7dbce9284dca6059db944f8df.png
<a download="foo.txt" target="_blank" href="https://www.gravatar.com/avatar/281c2df7dbce9284dca6059db944f8df?s=48&d=identicon&r=PG">download</a>

// Downloads as foo.txt
<a download="foo.txt" target="_blank" href="http://example.org/assets/avatar.png">download</a>

根据您的后端，可以设置一条路由，该路由通常将原始名称映射到实际文件名称。因此，前端链接到您的后端映射器，然后依次获取文件。