web-dev-qa-db-ja.com

プロンプトファイルのダウンロード

PDFドキュメントを生成し、ブラウザに[開く-保存]プロンプトを表示しようとしています。

私のHTML（reactjsコンポーネント）には、onclickが_getMyDocument関数を呼び出してWebapiメソッドを呼び出す以下のコードがあります。

 <div className="row">
     <a href="#" onClick={this._getMyDocument.bind(this)}>Test Link</a>
 </div>  

_getMyDocument(e) {
            GetMyDocument(this.props.mydata).then(()=> {
   }).catch(error=> {

  });

私のコントローラーには以下のコードがあります

[HttpPost]
[Route("Generate/Report")]
public IHttpActionResult GetMyReport(MyData myData)
 {  
    byte[] myDoc = MyBusinessObject.GenerateMyReport(myData);
    var result = new HttpResponseMessage(HttpStatusCode.OK)
        {
            Content = new ByteArrayContent(myDoc)
        };
        result.Content.Headers.ContentDisposition =
            new ContentDispositionHeaderValue("attachment")
            {
                FileName = "MyDocument.pdf"
            };
        result.Content.Headers.ContentType =
            new MediaTypeHeaderValue("application/octet-stream");

        var response = ResponseMessage(result);

        return response;
  }

現在、すべてのコードは実行されますが、ファイルが表示されませんPDFダウンロードプロンプト。ここで何が問題になっていますか？

以下のようなajax call lokksからの成功時の応答オブジェクト

enter image description here

javascriptc#jqueryreactjsasp.net-web-api2
18
San

サーバーからの応答はよさそうです。不足している部分は、クライアント側からのこの応答を正しい方法で処理していないことです。

リソースurlオブジェクトがjsで以下のようになっていると仮定しましょう。 （つまり、リソースのURLをすでに知っている場合、まだ知らない場合は、ダウンロードURLを知るためにサーバーへの別の呼び出しが必要になります）

_response.downloadUrl = app/media/fileId/document.pdf
_

あなたがする必要があるすべては設定されています、

_window.location = item.downloadUrl;
_

これにより、ブラウザはサーバーからリソースを要求し、サーバーからの応答はmust include _Content-Disposition:attachment;_になります。ブラウザにダウンロードダイアログが表示されます。

追伸最近、同様の機能に取り組んでいます。ご不明な点がございましたらお問い合わせください。

ブラウザに一部のファイル（またはリソース）のダウンロードプロンプトを表示させる場合は、応答ヘッダーに_Content-Disposition:attachment;_を含める必要があります（既に行っています）。

8
ScrapCode

これを行う簡単な方法は、サーバー上でGETメソッドを使用し、クエリパラメータによってデータを受け取ることです。

次に、クライアントアプリでクラシックリンクを作成するだけです。

<a href="http://your-server.com/your-resource?param1=123&param2=456">Test Link</a>

または、スクリプトロジックから管理する場合は、単純なjsスクリプトを使用します。

window.open("http://your-server.com/your-resource?param1=123&param2=456");
2
Thibaud Sowa

あなたの問題は、GetMyDocument関数がPDFファイルをサーバー応答として受信し、現在その応答で何も実行していないことです。その後、コールバックで応答を処理する必要があります。ファイルの保存javascriptは完全に単純ではないので、 filesaver.js などの外部ライブラリを使用することをお勧めします。

最終的には次のようになります...

_getMyDocument(e) {
    GetMyDocument(this.props.mydata)
    .then((response)=> {
        const returnedFile = new Blob([response], { type: 'application/pdf'});
        saveAs(returnedFile);
    }).catch(error=> {

    });
0
Alex Young

私たちのアプリ（angular）では、次のようなコードでそのためのオブジェクトURLを作成する必要がありました：

WebApi：

result = Request.CreateResponse(HttpStatusCode.OK);
result.Content = new ByteArrayContent(data);
result.Content.Headers.Add("Content-Type", "application/pdf");
result.Content.Headers.ContentDisposition =
                        new System.Net.Http.Headers.ContentDispositionHeaderValue("attachment")
                        {
                            FileName = "FileNameHere"
                        };

return result;

javascript：

// HttpCall in here
// On SuccessResponse
    var file = new Blob([data], {
                    type: 'application/pdf'
                    });
    var fileURL = URL.createObjectURL(file);
// create an anchor and click on it.
    var ancorTag = document.createElement('a');
    ancorTag.href = fileURL;ancorTag.target = '_blank';
    ancorTag.download = 'CouponOrder.pdf';
    document.body.appendChild(ancorTag);
    ancorTag.click();
    document.body.removeChild(ancorTag);
0
Ermir Beqiraj

Content Dispositionを作成し、応答ヘッダーに追加します

var cd = new System.Net.Mime.ContentDisposition
{
    // for example foo.bak
    FileName = System.IO.Path.GetFileName(fileName),
    // always Prompt the user for downloading, set to true if you want 
    // the browser to try to show the file inline
    Inline = false,
};
Response.AppendHeader("Content-Disposition", cd.ToString());
0
croban