2017-11-06 20 views
1

ファイルをExcelで取得し、そのファイルを使用してレスポンスを取得した後、ブラウザでダウンロードウィンドウを開くのに問題があります。私は適切なContent-Type and Content-Disposition headersを持っている、私はブロブ jsで使用しようとしたと私は欲しいものを達成することができませんでした - 簡単なファイルのダウンロード。
私のAjaxのいくつかのバージョンを達成しました。その1つは以下のものです。私は正常に開くことができなかったExcelファイルを返すajaxを開発しました。これは(xlsxの拡張子にもかかわらず)破損しているためです。ajaxのサーバーレスポンスからExcelファイル(.xlsx)を取得

おそらく、問題はBlobコンストラクタで使用される不適切なデータ型ですか?

私は成功メソッドの引数から "data"の代わりに "xhr.response"を使ってみましたが、うまくいきませんでした。 Chromeのデベロッパーツールのレスポンスヘッダーをチェックして、正しく設定されています。
重要な点 - サーバー側で作成されたすべてのExcelワークブックは、データがURLで送信されたときの以前のバージョンでは機能していたため、正しくありました。我々は最近、全く同じ問題を抱えた

$.ajax({ 
    url: myUrl, 
    type: 'POST', 
    data: myData, 
    success: function(data, status, xhr) { 
     var contentType = 'application/vnd.ms-excel'; 

     var filename = ""; 
     var disposition = xhr.getResponseHeader('Content-Disposition'); 
     if (disposition && disposition.indexOf('attachment') !== -1) { 
      var filenameRegex = /filename[^;=\n]*=((['"]).*?\2|[^;\n]*)/; 
      var matches = filenameRegex.exec(disposition); 
      if (matches != null && matches[1]) filename = matches[1].replace(/['"]/g, ''); 
     } 
     console.log("FILENAME: " + filename); 

     try { 
      var blob = new Blob([data], { type: contentType }); 

      var downloadUrl = URL.createObjectURL(blob); 
      var a = document.createElement("a"); 
      a.href = downloadUrl; 
      a.download = filename; 
      document.body.appendChild(a); 
      a.click(); 

     } catch (exc) { 
      console.log("Save Blob method failed with the following exception."); 
      console.log(exc); 
     } 

答えて

0

JQueryはレスポンスのバイナリデータを扱う際に問題があるようです。私は単純にXMLHttpRequestを使用し、すべてのデータをURLに追加します。

var request = new XMLHttpRequest(); 
request.open('POST', url, true); 
request.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded; charset=UTF-8'); 
request.responseType = 'blob'; 

request.onload = function(e) { 
    if (this.status === 200) { 
     var blob = this.response; 
     if(window.navigator.msSaveOrOpenBlob) { 
      window.navigator.msSaveBlob(blob, fileName); 
     } 
     else{ 
      var downloadLink = window.document.createElement('a'); 
      var contentTypeHeader = request.getResponseHeader("Content-Type"); 
      downloadLink.href = window.URL.createObjectURL(new Blob([blob], { type: contentTypeHeader })); 
      downloadLink.download = fileName; 
      document.body.appendChild(downloadLink); 
      downloadLink.click(); 
      document.body.removeChild(downloadLink); 
      } 
     } 
    }; 
    request.send(); 
0

:ファイルとオープンダウンロードウィンドウをダウンロードする

response.reset(); 
response.setContentType("application/vnd.ms-excel"); 
response.addHeader("Content-Disposition","attachment;filename=\"" + className + " " + title + ".xlsx\""); 
    try (ServletOutputStream output = response.getOutputStream()){ 
     workbook.write(output); 
     output.flush(); 
    } catch (Exception e) { 
     throw new RuntimeException(e); 
    } 

私のAjax:以下のJava /春サーバー側の

コントローラの方法。私たちにとっては、responseType: 'arraybuffer'ajaxのパラメータに追加すると機能し始めました。リンクを手動でクリックするのではなく、lib https://github.com/eligrey/FileSaver.js/を使用する方がよいでしょう。このツールはメモリをも無効にするからです。

+0

私は 'responseTypeで試してみました:「arraybuffer''それがあるため、おそらく' text'た不適切responseTypeに失敗しました。しかし、私はXMLHttpRequestを直接作成することでこの問題を解決しました。以下のコメントの作業コード。 – KamilosD

関連する問題