web-dev-qa-db-ja.com

APIをフェッチしてファイルを強制的にダウンロードする

フェッチAPIを使用してサーバーからExcelファイルをダウンロードするAPIを呼び出していますが、ブラウザーにダウンロードを強制しませんでした。以下はヘッダーの応答です。

HTTP/1.1 200 OK Content-Length: 168667 
Content-Type: application/vnd.openxmlformats-officedocument.spreadsheetml.sheet 
Server: Microsoft-IIS/8.5 
Content-Disposition: attachment; filename=test.xlsx 
Access-Control-Allow-Origin: http://localhost:9000 
Access-Control-Allow-Credentials: true 
Access-Control-Request-Method: POST,GET,PUT,DELETE,OPTIONS 
Access-Control-Allow-Headers: X-Requested-With,Accept,Content-Type,Origin 
Persistent-Auth: true 
X-Powered-By: ASP.NET 
Date: Wed, 24 May 2017 20:18:04 GMT

APIの呼び出しに使用しているコードの下：

this.httpClient.fetch(url, {
    method: 'POST',
    body: JSON.stringify(object),
    headers: {
        'Accept': 'application/json',
        'Content-Type': 'application/json'
    }
})
downloadaureliafetch-api
4
Ahmed Saber

そのリソースに移動した場合にのみ、ブラウザはダウンロードの通常の操作（[名前を付けて保存...]ダイアログの表示など）を表示しません。例を使用して違いを示す方が簡単です。

  1. window.location='http://mycompany.com/'
  2. ロード http://mycompany.com/ バックグラウンドでXHR/Fetchを介して。

1.では、ブラウザはページをロードし、そのコンテンツを表示します。 2.では、ブラウザが生データをロードして返しますが、自分で表示する必要があります。

あなたはファイルで同様のことをしなければなりません。生データはありますが、自分で「表示」する必要があります。これを行うには、ダウンロードしたファイルのオブジェクトURLを作成し、それに移動する必要があります。

this.httpClient
    .fetch(url, {method, body, headers})
    .then(response => response.blob())
    .then(blob => URL.createObjectURL(blob))
    .then(url => {
        window.open(url, '_blank');
        URL.revokeObjectURL(url);
    });

これにより、応答がフェッチされ、blobとして読み取られ、objectURLが作成され、（新しいタブで）開かれてから、URLが取り消されます。

オブジェクトURLの詳細： https://developer.mozilla.org/en-US/docs/Web/API/URL/createObjectURL

7
balazska

いくつかの便利なライブラリがあり、CSV /テキストのダウンロードで発生した問題を解決するために使用しました FileSaver 。

例：

var saveAs = require('file-saver');

fetch('/download/urf/file', {
  headers: {
    'Content-Type': 'text/csv'
  },
  responseType: 'blob'
}).then(response => response.blob())
  .then(blob => saveAs(blob, 'test.csv'));

この質問 で説明されているように download.js libもあります。

2
Conrado Fonseca

以下の関数を使用して、このように行うことができます

download(filename) {
 fetch(url , { headers })
 .then(response => response.blob())
 .then(blob => URL.createObjectURL(blob))
 .then(uril => {
 var link = document.createElement("a");
 link.href = uril;
 link.download = filename + ".csv";
 document.body.appendChild(link);
 link.click();
 document.body.removeChild(link);
 });
}

ここでCSVファイルをダウンロードしたいので、ファイル名に.csvを追加します。

1
VINEE

ダウンロードする別の方法を見つけました。これはIE

https://www.npmjs.com/package/downloadjs

0
Ahmed Saber