Tenemos una aplicación web ReactJS que usa un iframe para incrustar PDF en la página. Descargamos el PDF como una matriz de bytes y luego lo almacenamos como una URL de blob. Funciona en todos los navegadores excepto Safari. Usamos createURLObject que crea una URL local como blob:http://domain/guid. Si tomo esta URL y la abro en otra pestaña, muestra el PDF. No en Safari. Se redirige a favoritos con un Guid aleatorio y falla. Parece que Safari tiene problemas con blobs o archivos PDF. Intenté cambiarlo de una URL de blob a una URL de datos usando un lector de archivos. La única diferencia es que Safari puede representar la URL de datos en otra pestaña, pero no en un iframe. El iframe se carga pero el cuerpo está vacío con el mensaje 'no se encontró ningún complemento compatible'. Me estoy quedando sin idea y creo que Safari simplemente apesta

 downloadPDf(customerId) { this.api.downloadContract(customerId) .then(response => { const pdfData = new Blob(response.data.conent, 'application/pdf'); reader.onload = () => { this.setState({dataUrl : reader.result }); } reader.readAsDataURL(pdf); }

Luego en el JSX:

 <iframe src={this.state.dataUrl} .... />

Una vez que se carga el lector de archivos, el resultado tendrá una URL de datos que contiene los datos RAW para el PDF.

Se parece a algo como esto: data:application/pdf:byte64:<FILE_CONTENT>

Esto no se renderizará en el iframe, pero pegarlo en una nueva pestaña realmente renderizará el PDF correctamente.

Nuestro código original se basó en Blob URLS, que es así:

 downloadPDf(customerId) { this.api.downloadContract(customerId) .then(response => { const pdfData = new Blob(response.data.conent, 'application/pdf'); const dataUrl = window.URL.CreateURLObject(blob); }

Esto creará una URL de blob local que se verá así: blob:http://localhost/

Pegar esto en otra pestaña no funciona en Safari. Funciona en Edge, Chrome y FireFox.

La desventaja de usar la URL de datos es el lector de archivos y la devolución de llamada.