web-dev-qa-db-ja.com

生成中にファイルストリームをダウンロードする

シナリオ

ユーザーがデータを一括でクエリできるUIを構築しています。返される形式はCSVであり、発生する必要がある適切な量の処理があるため、この処理処理は並列に実行され、行のセットがUIにストリーミングされます。

現在の実装

AJAX POSTリクエストがサーバーに送信され、すべてのデータが到着するのを待ってから、createObjectURLを使用してダウンロード問題は、リクエストが完了するまでに数分かかることがあり、リクエストが進行中であることを示す回転インジケーターがユーザーに表示されることです。

問題

ユーザーが他の進行状況を確認できず、要求が実際に処理されているかどうか、またはどのくらいの時間がかかるかわからないのは、悪い経験です。

ゴール

ファイルがクライアントにストリーミングされるときに、ブラウザにファイルをダウンロードさせる。

障害

JavaScriptでこの動作を有効にすることはできません。私が見つけた最も近いものはスクリプト StreamSaver.js でしたが、外部MITMの使用は受け入れられず、これが実行可能であるかどうかを判断するのに十分なコードを理解していません（または良いアプローチです）。

その他のアイデア

  • GETリクエストまたはフォームを使用します。ここでの問題は2つあります。（1）要求データはネストされ、可変長である可能性があります。バックエンドでリクエスト文字列を解析する必要があるのは正しくないようです。 （2）これは、ページのリロードを引き起こし、Reactアプリケーションの状態を強制終了します。

  • ファイルをクライアントに継続的にダウンロードする代わりに、進行状況バーを追加できます。これを実現するには、予想されるチャンクの数を示すヘッダーを応答に追加し、各チャンクが受信されるたびにインクリメントします。このアプローチの欠点は、ユーザーがリクエストをキャンセルできず、部分的な結果を回復できないことです。

助けて

この問題に対するより良い解決策が見当たらないようです。上記の仮定に挑戦してください。私の主な目標は、優れたユーザーエクスペリエンスを提供するクリーンなソリューションを取得することです。

ノート

バックエンドはC＃Webアプリケーションであり、Reactがフロントエンドで使用されており、PHPレイヤーを介してパイプすることは、何らかの形でそれが役立つ場合に可能です。 。

javascriptweb-developmentuser-interfacestream-processing
1
Jared Goguen

あなたが探しているのはReadableStreamだと思います

https://developer.mozilla.org/en-US/docs/Web/API/ReadableStream/getReader

フェッチリクエストから生成し、必要に応じてストリーミングできます

https://developer.mozilla.org/en-US/docs/Web/API/Streams_API/Using_readable_streams

1
Ewan