Previsualizaciones en línea de PDFs

Hola,

llevo un tiempo utilizando este componente y hoy he notado que las vistas previas incrustadas ya no se muestran en las páginas.

2.8.0.beta6

Ejemplo

1 me gusta

Parece bien para mí en todos los navegadores de escritorio:

5 Me gusta

Y así es como se ve en Safari para iPad:

4 Me gusta

¡Gracias a todos!

Lo he comprobado de nuevo: Safari funciona bien en Mac, Edge también, pero Chrome ha fallado. Qué interesante.



4 Me gusta

¿Cómo podemos permitir el uso de este complemento en Safari en Mac? Funciona perfectamente para mí en otros navegadores, pero al intentar usarlo en Safari lo bloquea, incluso después de haber desactivado los bloqueadores de contenido en la sección de preferencias/sitios web. ¿Hay otra área donde debas desactivar los bloqueadores? Agradecemos cualquier ayuda.

1 me gusta

Realmente no lo sé, así que esto es solo un desperdicio de ancho de banda, pero Safari ha dado problemas antes debido a sus reglas bastante estrictas de CSP y otros temas de seguridad. Pero entonces debería afectar a todas las versiones de Safari, no solo a las de Mac, supongo.

3 Me gusta

Funciona para mí en Safari de Mac. El único lugar donde no me funciona es en un iPhone (Safari, FF y Chrome). No lo he probado recientemente en iPad.

3 Me gusta

Todos los navegadores web en iOS/iPadOS utilizan exactamente el mismo motor de renderizado (WebKit) debido a las restricciones de Apple, así que eso no importaría realmente de todos modos.

2 Me gusta

Esto es lo que veo en mi nuevo MacBook Air, Safari v. 14.1.1

Debo tener alguna configuración incorrecta en algún lugar…

3 Me gusta

Intenta actualizar Safari a la última versión.

2 Me gusta

Acabo de subir una nueva actualización.

Ahora puedes desactivar la vista previa para archivos PDF específicos. No funciona exactamente igual que los oneboxes, ya que eso sería un poco complicado de implementar en un componente de tema, pero es muy similar.

Cuando subas un archivo PDF, verás esto en el editor por defecto:

[file.pdf|attachment](upload://2cLML0SIwebGHDjlKRVzZ3VRv0f.pdf) (524.1 KB)

Todo lo que necesitas hacer es añadir un espacio antes del nombre del archivo, así:

[ file.pdf|attachment](upload://2cLML0SIwebGHDjlKRVzZ3VRv0f.pdf) (524.1 KB)

Ten en cuenta que el espacio debe estar dentro de los corchetes. Esto no afectará al nombre del archivo cuando lo descargues, ni tampoco tendrá ningún impacto en la descripción del archivo que se muestra en la publicación.

Una vez hecho esto, el PDF no tendrá una vista previa adjunta en la publicación renderizada.

La actualización añade una nueva configuración.

Tiene dos opciones:

Inline (Integrado) y New Tab (Nueva pestaña)

Si seleccionas Inline, las vistas previas de PDF se renderizarán en la publicación como antes.

Si seleccionas New Tab, el componente no creará una vista previa integrada. Sin embargo, el enlace del archivo adjunto se abrirá en una nueva pestaña. Esta pestaña mostrará el archivo PDF en el visor nativo del navegador.

Además, el icono junto al enlace del archivo adjunto cambiará a external-link en lugar de download.

La configuración predeterminada es Inline, así que… no afectará a los sitios que ya tenían este componente instalado antes de la actualización. Solo añade una nueva opción que debes activar manualmente.

Se han recibido algunos informes de que esto no funciona en Safari y en algunos dispositivos iOS, algo que no he podido reproducir. La actualización intenta solucionarlo cargando el PDF como una URL base64 en lugar de un blob, ya que he leído que esto es muy problemático en dispositivos Apple.

Por favor, actualiza el componente y asegúrate de que tu navegador también esté actualizado. Si, por alguna razón, no funciona en tu dispositivo Apple, revisa la consola del navegador si es posible y dime qué ves.

10 Me gusta

Desde la actualización a la versión más reciente, 2.8.0.beta6 (a1daf9fe53), las vistas previas de PDF parecen cargarse ligeramente más lento y, al menos en un caso, uno de los tres PDFs de la publicación no se muestra en Chrome:

No es un problema de caché: incluso después de limpiar la caché de Chrome, guardar el PDF con un cambio menor y volver a subirlo, la vista previa sigue sin aparecer. No hay entradas en el registro de errores. Chrome está actualizado a la última versión.

Consola:

3 Me gusta

Estoy en la versión 2.8.0.beta6. PC - Windows 10. Observación similar. Firefox es un poco lento, pero la vista previa finalmente carga. Chrome no la muestra; parece que se queda congelado en este marcador de posición gris.

4 Me gusta

Gracias por los detalles. Dado que dos de ellos cargaron correctamente, pensé que probablemente tenía algo que ver con el tamaño del archivo… y resulta que efectivamente es así.

Si subo un PDF grande, funciona bien en Firefox pero falla en Chrome. Leí un poco sobre esto y parece que el límite de longitud de una URL base64 lo decide en gran medida el proveedor. Firefox no tiene límites. Chrome los limita a 2 MB.

Por lo tanto, esto significa que una URL base64 no es una opción viable y tendríamos que volver a las URLs blob. Parece que Safari tiene mejor soporte si el elemento de vista previa es una etiqueta <object> en lugar de un iFrame.

Así que, este PR cambia todo de nuevo a una URL blob y cambia la etiqueta a <object>. Esto definitivamente resolverá el problema con archivos grandes en Chrome y, con suerte :crossed_fingers:, solucionará los problemas en dispositivos Apple.

Por favor, actualiza el componente nuevamente y házmelo saber si todavía tienes algún problema.

3 Me gusta

Los tamaños de archivo en la publicación con 3 PDFs son 548,3 KB, 1,1 MB y 1,6 MB, en ese orden de arriba hacia abajo. Tras actualizar únicamente el componente, las vistas previas ahora aparecen, pero ya no ocupan el ancho completo en Chrome:

EDITO: En Firefox se ve igual que en Chrome, y en Safari no se muestran las vistas previas, sino cuadros grises:

3 Me gusta

Gracias, he aplicado una pequeña corrección para el problema de tamaño.

UX: adds missing iFrame attributes by hnb-ku · Pull Request #4 · discourse/discourse-pdf-previews · GitHub

Probablemente no solucionará el problema en Safari, pero por favor pruébalo y házmelo saber.

3 Me gusta

Sí, Chrome y FF ya están solucionados; Safari sigue igual, solo con los cuadros grises.

3 Me gusta

Solo para confirmar, ¿Safari te funcionaba antes, verdad?

3 Me gusta

Sí, hasta la actualización reciente, todos los navegadores de escritorio funcionaban correctamente. No puedo decir hasta cuándo Safari estuvo bien porque no es mi navegador diario, pero sí puedo afirmar que ha funcionado en algún momento del pasado.

3 Me gusta

Este commit debería solucionar el problema en Safari.

FIX: previews are still broken on MacOS safari by hnb-ku · Pull Request #5 · discourse/discourse-pdf-previews · GitHub

Acabo de probarlo en un MacBook y funciona correctamente en Safari, Chrome y Firefox.

Si alguien ve este problema:

es un problema en su configuración, no en el componente.

How to unblock a blocked plug-in to displ… - Apple Community

Además, tenga en cuenta que este componente nunca ha soportado vistas previas de PDF en teléfonos móviles, según lo definido por Discourse, ya sea iOS o Android. Por lo tanto, ese es el comportamiento esperado.

7 Me gusta