2017-01-31 11 views
0

私は投稿として送信する必要がある複雑なオブジェクトパラメータを持っています。それはクエリ文字列には長すぎる可能性があるからです。ポストコールでは、Excelファイルを動的に生成して非同期にダウンロードするよう求めています。しかし、これはすべて、反応アプリケーションの中で起こっています。 axios.post、react、webapiを使ってどうやってこれを行うのですか?ファイルが生成され、応答までのダウンロードが戻ってくることを確認しましたが、ファイルを実際に開く方法がわかりません。私はファイルのパス、srcを設定しようとしている隠れたiframeを持っていますが、使用する応答プロパティはわかりません。webapiからaxios.postを使ってファイルをダウンロードするには

// webapi 
[HttpPost] 
public HttpResponseMessage Post([FromBody]ExcelExportModel pModel) 
{ 
    var lFile = ProductDataModel.GetHoldingsExport(pModel); 
    var lResult = new HttpResponseMessage(HttpStatusCode.OK); 
    lResult.Content = new ByteArrayContent(lFile); 
    lResult.Content.Headers.ContentDisposition = new ContentDispositionHeaderValue("attachment") 
    { 
     FileName = "HoldingsGridExport.xls" 
    }; 

    lResult.Content.Headers.ContentType = new MediaTypeHeaderValue("application/octet-stream"); 

    return lResult; 
} 

// client side api 
static getHoldingsExport({ UserConfigurationID, UserID, Configurations, ViewName, SortModel, FilterModel, UserConfigType, IsDefault, LastPortfolioSearchID = null, ProductId }) { 
    const filterModel = JSON.stringify(FilterModel); // saving as string as this model is dynamically generated by grid out of my control 
    const sortModel = JSON.stringify(SortModel); 

    let params = JSON.stringify({ 
     UserConfigurationID, 
     UserID, 
     Configurations, 
     ViewName, 
     filterModel, 
     sortModel, 
     UserConfigType, 
     IsDefault, 
     LastPortfolioSearchID, 
     ProductId 
    }); 

    return axiosInstance.post("/api/HoldingsExport", params); 
} 

// client side app call to get file 
HoldingsApi.getHoldingsExport(config) 
    .then(function(response) { 
     debugger; 
     let test = response; 
    }) 
    .catch(error => { 
     toastr.success('Failed to get export.'); 
    }); 

答えて

0

これは私がAxiosを経由して掲載することにより、ファイルのダウンロードを達成した方法です:

Axios.post("YOUR API URI", { 
    // include your additional POSTed data here 
    responseType: "blob" 
}).then((response) => { 
    let blob = new Blob([response.data], { type: "application/zip" }), 
     url = window.URL.createObjectURL(blob); 
    window.open(url, "_self"); 
}).catch((error) => { 
    // ... 
}); 
関連する問題