Iniciar Descargar ONCLICK ¿No funciona en ningún navegador? -- reactjs campo con file campo con download camp Relacionados El problema

Initiate download onClick not working on any browser?


0
vote

problema

Español

Estoy intentando iniciar una descarga OnClick con Firefox o cualquier navegador para el caso, pero parece que no puede hacer que funcione de manera adecuada. He confirmado que mi solicitud de red está funcionando porque está publicando un 200 y puedo ver los datos en la respuesta. Aquí es cómo estoy manejando mi solicitud:

   await fetch (params)             .then(async (data) => {                 data.blob();             })             .then((blob) => {                 const url = window.URL.createObjectURL(new Blob(blob));                 const link = document.createElement('a');                 setSuccess('Success');                 link.href = url;                 link.setAttribute(                     'download',                     modelName + formatName,                 );                 document.body.appendChild(link);                 link.click();             });   

Además, aquí está mi código de componente de UI de reacción donde se llama mi solicitud:

   React.useEffect(() => {         if (clicked === true) {              fetchData();         }     }, [clicked]);      const handleExport = () => {         setClick(true);     };     return (         <Col id="exportColumn" className="col-lg-6 text-center">             <Suspense fallback={<div> Loading . . . </div>}>                 <Button id="exportButton" onClick={handleExport} variant="dark">                     Export                 </Button>             </Suspense>         </Col>     );   

¿Alguna idea de que esto no funciona en Firefox?

Original en ingles

I'm attempting to initiate a download onclick with Firefox or any browser for that matter, but cannot seem to get it working appropriately. I've confirmed that my network request is working because it's posting a 200 and I can see the data in the response. Here is how I'm handling my request:

 await fetch (params)             .then(async (data) => {                 data.blob();             })             .then((blob) => {                 const url = window.URL.createObjectURL(new Blob(blob));                 const link = document.createElement('a');                 setSuccess('Success');                 link.href = url;                 link.setAttribute(                     'download',                     modelName + formatName,                 );                 document.body.appendChild(link);                 link.click();             }); 

Additionally, here is my React UI component code where my request is being called:

 React.useEffect(() => {         if (clicked === true) {              fetchData();         }     }, [clicked]);      const handleExport = () => {         setClick(true);     };     return (         <Col id="exportColumn" className="col-lg-6 text-center">             <Suspense fallback={<div> Loading . . . </div>}>                 <Button id="exportButton" onClick={handleExport} variant="dark">                     Export                 </Button>             </Suspense>         </Col>     ); 

Any ideas why this isn't working on Firefox?

        

Lista de respuestas

0
 
vote

Algo que veo es que está encadenando entonces métodos, pero el primero no está devolviendo nada. Si desea que su primero regrese DATA.BLOB (); Debe quitar los soportes o reemplazarlos con paréntesis.

Me gusta esto:

  apache-tomcat/bin/setenv.bat5  
 

Something I see is that you're chaining then methods, but the first one isn't returning anything. If you want your first then to return data.blob(); you need to remove the brackets or replace them with parentheses.

Like this:

 await fetch(params).then(async (data) => data.blob())... 
 
 

Relacionados problema

7  Jquery 1.11.1 - Descargar archivo y devolución de llamada adicional  ( Jquery 1 11 1 download file and additional callback ) 
Tengo formulario que me envio al servidor Django llamando. $("#my_form").submit(); servidor de TI devuelve el archivo XML ejecutando este código: co...

1  ¿Cómo obtengo un listado de directorio para una carpeta en la web?  ( How do i get a directory listing for a folder on the web ) 
¿Cómo obtengo un listado de directorio para una carpeta en la web? Estoy buscando descargar un grupo de archivos pequeños de una carpeta en la web. Puedo hace...

81  ¿Cómo rastreo las descargas de archivos?  ( How do i track file downloads ) 
Tengo un sitio web que reproduce MP3 en un reproductor Flash. Si un usuario hace clic en 'Play', el reproductor Flash descarga automáticamente un MP3 y comien...

0  Cómo generar una descarga en el usuario HAGA CLIC  ( How to generate a download on user click ) 
Esto podría parecer que es una pregunta para los noobs, pero quiero saber exactamente qué código se requiere para iniciar una descarga cuando un usuario hace ...

6  Descargue sincrónicamente una imagen de URL  ( Synchronously download an image from url ) 
Solo quiero obtener un bitmimage de una URL de Internet, pero mi función no parece funcionar correctamente, solo me devuelve una pequeña parte de la imagen. S...

1  Aplicación Struts: no se puede descargar el archivo a través de HTTPS ON IE  ( Struts application unable to download file through https on ie ) 
Tengo una aplicación STORUTS que en algún momento ofrece la posibilidad de descargar algunos archivos. Recientemente descubrí que la descarga falla a través d...

1  Secure y reanude el archivo de soporte de la descarga con PHP  ( Secure and resume support file downloading with php ) 
Quiero dar permiso a algunos de los usuarios de mi sitio web para descargar un archivo específico. La descarga debe ser compatible con reanudación solo para l...

2  ¿Dónde puedo descargar OpenGL para Windows Vista?  ( Where can i download opengl for windows vista ) 
He estado buscando y no puedo encontrar los archivos de descarga en OpenGL.org. ¿Puede alguien apuntarme a la dirección correcta? ...

2  La mejor manera de actualizar el programa Multi-Gigabyte (DVD Fulfillment? Software Updater?)  ( Best way to update multi gigabyte program dvd fulfillment updater software ) 
Hace dos años, enviamos una aplicación de Windows multi-gigabyte, con muchos archivos de video. Ahora estamos buscando lanzar una actualización significativa,...

2  Eliminar un archivo en Java mientras lo subía en otro hilo  ( Deleting a file in java while uploading it in other thread ) 
Estoy tratando de construir un programa de intercambio de archivos semi, cuando cada computadora actúa como un servidor y como cliente. Doy múltiples hilos ...




© 2022 respuesta.top Reservados todos los derechos. Centro de preguntas y respuestas reservados todos los derechos