Tengo un parámetro de objeto complejo que necesito enviar como publicación, ya que podría ser demasiado largo para la cadena de consulta. La llamada posterior solicita que se genere dinámicamente un archivo de Excel y luego se descargue de forma asíncrona. Pero todo esto sucede dentro de una aplicación de reacción. ¿Cómo se hace esto usando axios.post, react y webapi? He confirmado que el archivo se genera y la descarga hasta la respuesta vuelve, pero no estoy seguro de cómo abrir el archivo. Tengo un iframe oculto en el que estoy tratando de establecer la ruta, src, del archivo, pero no sé qué propiedad de respuesta usar.
// 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.'); });Así es como logré las descargas de archivos mediante POSTing a través de Axios:
Axios.post("YOUR API URI", { // include your additional POSTed data here responseType: "blob" }).then((response) => { let blob = new Blob([response.data], { type: extractContentType(response) }), downloadUrl = window.URL.createObjectURL(blob), filename = "", disposition = response.headers["content-disposition"]; if (disposition && disposition.indexOf("attachment") !== -1) { let filenameRegex = /filename[^;=\n]*=((['"]).*?\2|[^;\n]*)/, matches = filenameRegex.exec(disposition); if (matches != null && matches[1]) { filename = matches[1].replace(/['"]/g, ""); } } let a = document.createElement("a"); if (typeof a.download === "undefined") { window.location.href = downloadUrl; } else { a.href = downloadUrl; a.download = filename; document.body.appendChild(a); a.click(); } }).catch((error) => { // ... });En caso de que la solución anterior no le sirva del todo bien, así es como podría descargar videos que están alojados en depósitos de S3 AWS,
const handleDownload = () => { const link = document.createElement("a"); link.target = "_blank"; link.download = "YOUR_FILE_NAME" axios .get(url, { responseType: "blob", }) .then((res) => { link.href = URL.createObjectURL( new Blob([res.data], { type: "video/mp4" }) ); link.click(); }); };Y activo la función handleDownload en un botón con onClick .
La URL en la función tiene la URL del video de los cubos S3