0
105
VistasReaccionar no puede descargar PDF desde la etiqueta de anclaje
Estoy tratando de descargar un documento con reaccionar. Tengo esto en mi código ahora mismo:
<li><a href={this.state.invoice.pathToFile}>Download Invoice</a></li>La ruta al archivo se ve así:
C:\bin\documents\invoices\invoice-01-01-2021.pdf Cada vez que hacemos clic en el enlace para descargar el archivo, volvemos a la página de inicio. Espero que simplemente descargue el archivo. Cuando paso el cursor sobre el enlace de descarga, muestra la ubicación del archivo: 
No estoy seguro de qué está pasando o causando esto.
3 Respuestas
Responde la pregunta0
Esto no es un problema de reacción. Agregue el atributo de download al ancla <a> para que el navegador descargue el archivo
<li><a href={this.state.invoice.pathToFile} download>Download Invoice</a></li>0
Puede usar el atributo de download para el elemento ancla para guardar archivos, si hace referencia al archivo correctamente, así:
<a href="Your file location" download>Download</a>Y en tu caso debería ser así:
<li><a href={this.state.invoice.pathToFile} download>Download Invoice</a></li>0
Ninguna de estas soluciones terminó funcionando. En el back-end tuve que implementar un controlador de descargas así:
[HttpPost] public ActionResult GetInvoiceDocument([FromBody] string PathToFile) { byte[] fileBytes = System.IO.File.ReadAllBytes(PathToFile); var fileName = PathToFile.Split("/")[3]; return File(fileBytes, System.Net.Mime.MediaTypeNames.Application.Octet, fileName); }En el front-end, creé un método que se llama onClick. Esto descarga un documento y luego agrega una etiqueta de anclaje al DOM y descarga instantáneamente el archivo.
downloadFile = (e : any, filePath : string) => { e.preventDefault(); let options = { method : "POST", headers : { 'Accept' : 'application/json', 'Content-Type' : 'application/json;charset=UTF-8' }, body : JSON.stringify(filePath) }; fetch('https://localhost:44304/api/DownloadDocument', options).then(async res => ({ filename: this.state.invoice.pathToFile!.split('/')[3]!, blob : await res.blob() })). then(resObj => { const newBlob = new Blob([resObj.blob], { type : 'application/pdf'}); const objUrl = window.URL.createObjectURL(newBlob); let link = document.createElement('a'); link.href = objUrl; link.download = resObj.filename; link.click(); setTimeout(() => { window.URL.revokeObjectURL(objUrl); }, 250); }) }