web-dev-qa-db-ja.com

サーバーからExcelファイルをダウンロードしてクライアントに保存する

JavaScriptアプリと、Excelファイルを作成し、次のヘッダーを持つバイト配列を返すAPIがあります。

Content-Type: application/vnd.openxmlformats-officedocument.spreadsheetml.sheet
Content-Disposition:attachment; filename=List.xlsx

ExcelリソースAPIのURLにアクセスすると、Excelファイルをダウンロードするように求められます。私がそうすれば、それはうまくダウンロードしてExcelで開きます。すべてが良いです。

今問題に：

ユーザーのブラウザウィンドウでAPI URLを公開したくないので、私の目標は次のとおりです。

  • AJAX XMLHttpRequestからExcelファイルをダウンロードします
  • コンテンツ（バイト配列）をBlobに格納する
  • Blobを使用してデータURIを作成する
  • ユーザーにExcelファイルをダウンロードするように求めるポップアップでデータURIを開きます

私が持っているのはこれです：

ファイルをダウンロードしますが、ファイルを開こうとすると、Excelで有効なExcelファイルとして認識されません。

// "data" is the contents from the server

var reader = new FileReader();
var blob = new Blob([data], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' });
reader.readAsDataURL(blob);

reader.onloadend = function (e) {
    window.open(reader.result, 'Excel', 'width=20,height=10,toolbar=0,menubar=0,scrollbars=no', '_blank');
}
javascriptexcelblobfilereader
9
Gaui

うまくいきました。次のコードをXMLHttpRequestオブジェクトに追加するだけです。

responseType: 'arraybuffer'

IEはデータURIを開くことができないため、IEでは機能しません。IE11でも機能しません。

とにかく私は見つけました FileSaver.jsと呼ばれる素晴らしいライブラリ これはすべての主要なブラウザー（IE10 +を含む）のファイルの保存を処理します

8
Gaui