122

ファイルをダウンロードしたい場合、then以下のブロックで何をすればよいですか?

function downloadFile(token, fileId) {
  let url = `https://www.googleapis.com/drive/v2/files/${fileId}?alt=media`;
  return fetch(url, {
    method: 'GET',
    headers: {
      'Authorization': token
    }
  }).then(...);
}

コードはクライアント側にあることに注意してください。

4

9 に答える 9

95

これはより短く効率的であり、API を取得するだけのライブラリはありません

const url ='http://sample.example.file.doc'
const authHeader ="Bearer 6Q************" 

const options = {
  headers: {
    Authorization: authHeader
  }
};
 fetch(url, options)
  .then( res => res.blob() )
  .then( blob => {
    var file = window.URL.createObjectURL(blob);
    window.location.assign(file);
  });

于 2020-01-28T00:04:25.720 に答える
56

download.jsとを使用して、この問題を一時的に解決しますblob。

let download = require('./download.min');

...

function downloadFile(token, fileId) {
  let url = `https://www.googleapis.com/drive/v2/files/${fileId}?alt=media`;
  return fetch(url, {
    method: 'GET',
    headers: {
      'Authorization': token
    }
  }).then(function(resp) {
    return resp.blob();
  }).then(function(blob) {
    download(blob);
  });
}

小さなファイルでは機能しますが、大きなファイルでは機能しない可能性があります。Streamをもっと掘り下げるべきだと思います。

于 2015-09-13T02:54:17.283 に答える
3

他の回答のいくつかに従って、間違いなく window.fetch とdownload.jsを使用してファイルをダウンロードできます。ただし、window.fetch を blob で使用すると、ブラウザによって課されるメモリの制限があり、download.js にも互換性の制限があります。

大きなサイズのファイルをダウンロードする必要がある場合、それをクライアント側のメモリに入れてブラウザに負荷をかけたくありませんよね? 代わりに、ストリーム経由でダウンロードすることをお勧めします。このような場合、HTML リンクを使用してファイルをダウンロードすることは、特にストリームを介して大きなサイズのファイルをダウンロードする場合に、最良/最も簡単な方法の 1 つです。

ステップ 1:リンク要素を作成してスタイルを設定する

リンクを非表示にできますが、アクション可能です。

HTML:

<a href="#" class="download-link" download>Download</a>

CSS:

.download-link {
  position: absolute;
  top: -9999px;
  left: -9999px;
  opacity: 0;
}

ステップ 2:hrefリンクの設定とclickイベントのトリガー

JavaScript

let url = `https://www.googleapis.com/drive/v2/files/${fileId}?alt=media`;

const downloadLink = document.querySelector('.download-link')
downloadLink.href = url + '&ts=' + new Date().getTime() // Prevent cache
downloadLink.click()

注:

  • 必要に応じて、リンク要素を動的に生成できます。
  • このアプローチは、サーバー側で動的に生成される大きなサイズのファイルをストリーム経由でダウンロードする場合に特に便利です。
于 2019-09-26T11:15:29.533 に答える