Previsualizaciones en línea de PDFs

:discourse2: Resumen Vistas previas de PDF en línea es un componente de tema solo para escritorio que le permitirá crear vistas previas para archivos adjuntos en PDF.
:eyeglasses: Vista previa Vista previa en el Creador de Temas de Discourse (solo escritorio)
:hammer_and_wrench: Enlace al repositorio https://github.com/discourse/discourse-pdf-previews
:open_book: ¿Nuevo en los temas de Discourse? Guía para principiantes para usar temas de Discourse

Instalar este componente de tema

Funcionalidades

antes

después

Como se mencionó anteriormente, este componente solo funcionará en escritorio. Hay muy poco beneficio en mostrar las vistas previas en dispositivos móviles, ya que todo será tan pequeño y muy difícil de leer.

Este componente utiliza la implementación nativa del navegador para renderizar los PDF, por lo que los resultados se verán diferentes en distintos navegadores.

Además, tenga en cuenta que las cargas de PDF no están permitidas de forma predeterminada en Discourse. Si desea permitir que sus usuarios carguen archivos PDF, deberá agregar esa extensión a authorized_extensions si desea que todos sus usuarios puedan cargar PDF, o a authorized_extensions_for_staff si desea limitar eso a los miembros del personal.

:information_source: Si utiliza S3, es posible que también necesite actualizar su política CORS. Consulte la publicación a continuación: Inline PDF Previews - #106 by JammyDodger

¿Cómo lo uso?

  1. Instale el componente
  2. Permita las cargas de PDF
  3. Actualice la página
  4. Cargue un PDF

Eso es todo. El resto debería funcionar automáticamente.

Configuración

Nombre Descripción
modo de vista previa En línea: Los archivos adjuntos en PDF se renderizarán en línea dentro de las publicaciones

Nueva pestaña: Los enlaces de archivos adjuntos en PDF llevarán al usuario a una nueva pestaña donde se renderizará el PDF

Funcionalidades adicionales

Si desea que un PDF individual no se renderice en línea, simplemente puede agregar un espacio antes del nombre del archivo, por ejemplo:

Esto se mostrará en línea

[sample-pdf.pdf|attachment](upload://usvbcKiQSWqA3w10gnf5PtydiXR.pdf) (82.9 KB)

Esto no se mostrará en línea

[ sample-pdf.pdf|attachment](upload://usvbcKiQSWqA3w10gnf5PtydiXR.pdf) (82.9 KB)

:discourse2: ¿Alojado por nosotros? Los componentes de tema están disponibles para usar en nuestros planes Estándar, Empresarial y Corporativo.

68 Me gusta

Estoy alojando mis subidas e imágenes en S3, y la vista previa está bloqueada por una “política de CORS: No hay un encabezado ‘Access-Control-Allow-Origin’ presente”.

A continuación, lo que dice la consola de Chrome:

El acceso a la solicitud en 'https://travelmassive-discourse-cdn.s3.dualstack.us-west-1.amazonaws.com/original/2X/b/b578f6364592121964e6a2fd4969e5c1222bd909.pdf' (redirigido desde 'https://lounge.travelmassive.com/uploads/short-url/pTnA3r043WfhDK8HSdPQrtNn8Lf.pdf') desde el origen 'https://lounge.travelmassive.com' ha sido bloqueado por una política de CORS: No hay un encabezado 'Access-Control-Allow-Origin' presente en el recurso solicitado. Si una respuesta opaca satisface tus necesidades, establece el modo de la solicitud en 'no-cors' para obtener el recurso con CORS deshabilitado.

Actualización

Logré solucionarlo agregando la siguiente política CORS en la configuración de mi bucket de S3.

<CORSConfiguration>
 <CORSRule>
   <AllowedOrigin>https://mydiscourse.url/</AllowedOrigin>
   <AllowedMethod>GET</AllowedMethod>
   <AllowedHeader>*</AllowedHeader>
   <ExposeHeader>Access-Control-Allow-Origin</ExposeHeader>
 </CORSRule>
</CORSConfiguration>
2 Me gusta

Es necesario añadir que, si ves este texto en el mensaje de error from origin 'https://lounge.travelmassive.com' has been, donde tu dominio no tiene una barra / al final, entonces en la configuración de CORS también debes agregar tu dominio sin la barra al final, así:
https://mydiscourse.url

1 me gusta

He notado que tus subidas están en AWS, por lo que el problema probablemente esté relacionado con CORS (el componente no está activo en tu sitio para que pueda confirmarlo). Consulta la publicación justo debajo de la tuya.

¡Gracias por compartir eso!

Ten en cuenta que este problema solo afectará a los que hacen autoalojamiento y han configurado algo como S3. Los que hacen autoalojamiento y no utilizan S3 no tendrán este problema. Los clientes alojados por CDCK tampoco necesitarán preocuparse por esto, ya que ya tienen eso configurado.

Dicho esto, la configuración de CORS está un poco fuera del alcance de este tema. Si el bucket de subidas no permite el acceso de tu propio dominio, eso debe solucionarse de todos modos, ya que podrían producirse otros problemas a causa de ello.

No estoy muy seguro de lo que ocurrió aquí. En ambos casos parece funcionar cada vez que lo pruebo. Podemos atribuirlo a un problema de red transitorio, pero por favor házmelo saber si lo vuelves a ver :+1:

He realizado una pequeña actualización en este componente que debería mejorar la percepción de carga; ahora hay un marcador de posición basado en el color del tema en lugar de los estilos predeterminados del Iframe del navegador. Solo se muestra mientras se carga el archivo, por lo que el 99 % de las veces ni siquiera lo notarás.

Dado que la mayoría de los PDFs se cargan al instante, no consideré que valiera la pena añadir un indicador de carga.

9 Me gusta

¿Sería posible hacer que la vista previa de PDF se suprima al anteponer un espacio antes del enlace de carga, como con el oneboxing? A veces se desea una lista de documentos y no vistas previas. Otras veces, sí se desea una vista previa.

9 Me gusta

Estoy usando Safari en macOS Catalina y no tengo nada que deshabilite la visualización de PDF en el navegador; por ejemplo, http://www.orimi.com/pdf-test.pdf se muestra correctamente. Sin embargo, sigo viendo la ventana o el mensaje “Complemento bloqueado” cuando veo la vista previa en theme-creator.

La configuración específica del sitio en las preferencias de Safari no es diferente a la de otros sitios web.

¿Le está ocurriendo esto a alguien más?

3 Me gusta

Aún no me funciona en Safari en macOS Big Sur. No hay configuraciones especiales para los plugins del blog y otros archivos PDF se muestran en el navegador.

El Inspector Web de Safari muestra las siguientes quejas al cargar la página de vista previa en theme-creator:
Directiva 'worker-src' no reconocida en la Política de Seguridad de Contenido.
Se ha rechazado la carga de blob:https://theme-creator.discourse.org/7b9b62c7-e782-4080-a521-04e3b06aa142 porque no aparece en la directiva object-src de la Política de Seguridad de Contenido.

3 Me gusta

¡Esto supondría una gran mejora para este componente! ¿Es factible, @Johani?

5 Me gusta

Yo tengo el mismo problema en Firefox, pero solo después de la segunda visita :wink:
¿Hay alguna solución alternativa para esto? ¿Declaración manual en la configuración de CSP?

Gracias

1 me gusta

Esto ha dejado de funcionar en mi sitio. En lugar de la vista previa del PDF, aparece un gran cuadro negro:

Desactivar los complementos mediante el Modo Seguro no hace ninguna diferencia, ni tampoco eliminar cada otro componente del tema.

Esto ocurrió después de mover las imágenes y las cargas de archivos a S3, lo cual podría ser el culpable. Espero que no, porque no se pueden mover fácilmente de vuelta.

Estoy atascado. Qué pena, ya que es un componente excelente. ¿Alguna sugerencia?

2 Me gusta

Veo el mismo comportamiento con las cargas a S3 activadas.

3 Me gusta

¿Aún puedes descargar el PDF?
A mí sigue funcionando (s3 + medios seguros y sin CDN) :thinking:

1 me gusta

Sí, podemos. Tenemos la misma configuración que tú (creo).

1 me gusta

:thinking:

  • mis enlaces en los mensajes tienen el formato domain/secure-media-uploads/original/...
  • pero en la consola/red puedo ver que las descargas reales provienen del bucket
    ¿Ves las credenciales de amz?

Si no es así, ¿quizás esto ayude?

También recuerdo que ocurría algo extraño cuando intentaba mover una publicación de categorías (¿o fue un copiar/pegar?). Finalmente funcionó cuando volví a cargar el archivo.

1 me gusta

Estoy experimentando este mismo comportamiento en una instalación nueva de Discourse y con un nuevo archivo adjunto PDF.

3 Me gusta

Gracias, @Benjamin_D. Resulta que no tengo las cargas seguras habilitadas, y mis enlaces se ven bien y funcionan perfectamente, como este:

The HiNZ eHealth Forum - trusted online digital health discussion

Así que estoy atascado, especialmente porque no entiendo por qué funciona en dos foros que administro y no en el otro; la única diferencia es S3. Y el hecho de que tú lo tengas funcionando con S3. Estoy realmente confundido.

1 me gusta

Después de actualizar a la última versión de Discourse, los archivos adjuntos en PDF ya no se muestran. ¿Cuál podría ser el problema?

1 me gusta

Puede ser un conflicto con otro componente o tema. En mi caso, funciona como se espera. Comienza desactivando otros componentes y prueba a usar el tema predeterminado si el tuyo es diferente. Lo mismo aplica para los complementos.

3 Me gusta

Ok, he avanzado. Desactivar las cargas a S3 lo soluciona para las nuevas cargas. Pero me quedaría con un desastre entre S3 y local si tomo ese camino.

Podría ser que no esté usando la cosa de CDN (CloudFront), que lanza esos errores molestos en la página de administración. Voy a intentar configurarlo y ver si funciona.

más tarde - no, un CDN no hace ninguna diferencia.

muchísimo más tarde - he eliminado con éxito las cargas a S3 (con un poco de esfuerzo), así que todo bien ahora.

Ahora, ¡tengo muchas ganas de mejorarlo! ¿Hay alguna persona inteligente con las habilidades necesarias interesada en intentarlo?

4 Me gusta

Estoy buscando un plugin que permita abrir el PDF en una nueva pestaña.
El comportamiento actual de mi Discourse es permitir solo la descarga.
¿Sería posible lograrlo con un tema similar?

5 Me gusta