Reactコンポーネントのアンカータグに属性をダウンロード

Question

ファイルをクラウドに保存するので、アップロードプロセス中に名前が一意になる接頭辞が付けられます。たとえば、test.txtという名前のファイルをアップロードすると、アップロード時に7ea205f01ae5_test.txtという名前で保存されます。元のファイル名を取得して保存することに注意することが重要です。

私のReactコンポーネントでは、download属性を使用してユーザーフレンドリーにしようとしています。そのため、ユーザーがファイルをダウンロードするためにクリックすると、test.txtとしてダウンロードされますが、機能しません。ファイルはまだ7ea205f01ae5_test.txtとしてダウンロードされます。

これは、コードが見えるリアクト私のものです

<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> 

バックエンドによっては、元の名前を実際のファイル名に一般的にマップするルートを設定することができます。フロントエンドはバックエンドマッパーにリンクし、順番にファイルを取得します。