下载 React 组件中锚标记中的属性

IT技术 html reactjs
2021-05-07 18:56:06

我将文件存储在云中,因此在上传过程中,他们会获得前缀,使其名称独一无二。例如,如果我上传一个名为 的文件test.txt,在上传过程中它会被保存为7ea205f01ae5_test.txt. 需要注意的是,我确实捕获并保存了原始文件名。

在我的 React 组件中,我试图通过使用下载属性使其用户友好,以便当用户单击下载文件时,它会被下载为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

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>

根据您的后端,您可以设置一个路由,将原始名称一般映射到实际文件名。所以前端链接到你的后端映射器,然后它依次抓取文件。