Tengo una URL de entrada con la que quiero descargar el archivo pdf directamente sin verlo en una pestaña nueva o en la misma pestaña. He intentado seguir las cosas hasta ahora, pero nada ayuda. Primero probé con esto
http.success(function (data) { var link = document.createElement('a'); link.href = data.results[0].value.url; link.download = data.results[0].value.url.substr(data.results[0].value.url.lastIndexOf('/') + 1); link.click(); document.body.appendChild(link); setTimeout(function () { document.body.removeChild(link); }, 100); }.bind(this));Este script no está descargando el archivo. Abre el archivo en la misma pestaña. He intentado todas las respuestas en estas preguntas respondidas previamente. Pero nada funcionó para mí. ¿Cómo puedo descargar un pdf desde una url usando javascript? ¿Cómo descargar PDF automáticamente usando js? Descargar pdf sin abrir en el navegador
Luego probé con este Blob . Agregué el blob a mi script y luego lo intenté nuevamente.
http.success(function (data) { var blob=new Blob([data.results[0].value.url],{ type: "application/pdf" }); var link = document.createElement('a'); link.href = window.URL.createObjectURL(blob); link.download = data.results[0].value.url.substr(data.results[0].value.url.lastIndexOf('/') + 1); link.click(); document.body.appendChild(link); setTimeout(function () { document.body.removeChild(link); }, 100); }.bind(this));Pero esta vez descarga el archivo. Pero no puedo abrirlo. El archivo descargado está dañado. Han intentado las respuestas en estas preguntas. Pero nada funcionó para mí. El PDF está dañado después de reconstruirlo usando URL.createObjectURLProblema al descargar un blob en PDF en JavaScript El blob del búfer devuelve un pdf dañado
avíseme si hay otras formas de descargar el archivo pdf directamente. Gracias por adelantado.
¿Qué se almacena en data.results[0].value.url?
¿Es solo un enlace al PDF? Si ese es el caso, primero deberá buscar el documento pdf.
Prueba esto
http.success(function (data) { fetch(data.results[0].value.url) .then((response) => response.arrayBuffer()) .then((pdfFile) => { const blob = new Blob([pdfFile], { type: "application/pdf" }); const anchor = document.createElement("a"); anchor.href = window.URL.createObjectURL(blob); anchor.download = "SOME FILENAME.PDF"; // some browser needs the anchor to be in the doc document.body.append(anchor); anchor.click(); anchor.remove(); // in case the Blob uses a lot of memory window.addEventListener( "focus", () => { URL.revokeObjectURL(anchor.href); }, { once: true, } ) }); })Primero, recomendaría probar el ejemplo más simple.
const pdfLink = data.results[0].value.url const download = (url) => { const link = document.createElement('a'); link.setAttribute('download', 'fileName.pdf'); link.setAttribute('href', url); link.click(); } downloadBlob = (blob) => download(URL.createObjectURL(blob)) fetch(pdfLink) .then(response => response.blob()) .then(downloadBlob)Les comparto un trozo de código usando MUI + JS
<IconButton variant="contained" sx={{ fontSize: '1rem', fontWeight: 'normal', color:'silver', }} component='label' size={'small'} onClick={() => { const url = 'https:.....' fetch(url) .then((res) => { return res.blob(); }) .then((data) => { const a = document.createElement("a") a.href = window.URL.createObjectURL(data) a.download = formValues[id] a.click() }); }}> <VisibilityIcon /> </IconButton>