Previsualizaciones en línea de PDFs

Personalización Componente temático
, ,
55

¡Excelente! Gracias @Johani. Puedo confirmar que ahora funciona en los 3 navegadores.

4 Me gusta
56

¡Fantástico! Estas son mejoras sólidas y claramente requieren mucho trabajo para lograrlas. ¡Gracias por escucharnos, a nosotros, los co-conspiradores un poco molestos del mundo del autoalojamiento!

¿Funciona ahora el Componente con las cargas a S3?

3 Me gusta
57

No lo he probado, pero debería funcionar si tu bucket está configurado correctamente. Este componente realiza una solicitud para cargar el PDF.

Este tipo de solicitudes realizadas en JavaScript se bloquean si el origen no tiene permitido el acceso al archivo. En ese caso, obtendrás un error de CORS. Si revisas la consola, probablemente verás algo similar a esto.

image

El componente no puede hacer mucho al respecto. Todo debe gestionarse en tu configuración de S3. El origen (tu dominio de Discourse) debe tener permitido realizar este tipo de solicitudes para evitar problemas de CORS.

9 Me gusta
58

¡Gracias! Pronto me lanzaré valientemente de nuevo a S3.

Otra sugerencia: pestaña cuando haya un espacio antes del nombre del archivo

Lo que deseo es que el PDF se muestre en línea de forma predeterminada y que se abra en una nueva pestaña si se incluye un espacio en el nombre del archivo. Esto permite a los autores elegir, para cada PDF, entre la visualización en línea o en pestaña, en lugar de hacerlo por componente.

Quizás la configuración del componente debería ser: “¿Qué comportamiento predeterminado deseas?” y, si se incluye un espacio, se obtiene la otra opción.

O, alternativamente, se podría preguntar qué acción debe realizar el espacio (en línea / pestaña / descarga).

2 Me gusta
59

¡Aargh! Chrome vuelve a mostrar solo cuadros grises. FF y Safari están bien.

3 Me gusta
60

¿Está este componente del tema enviando el PDF a un intérprete externo?
Tengo activada la opción “medios seguros” porque quiero evitar que los archivos sean cargados por un servicio externo.

1 me gusta
61

He descubierto que esto se debe al siguiente código:

<a class="attachment pdf-attachment" href="...pdf">doc.pdf
  <iframe src="blob:..."> height="500" loading="lazy" class="pdf-preview">
  </iframe>
</a>

Si reemplazas el código anterior con el siguiente:

<a class="attachment pdf-attachment" href="...pdf">doc.pdf</a>
<iframe src="blob:..."> height="500" loading="lazy" class="pdf-preview"></iframe>

funcionará.
Pero no estoy seguro de cómo solucionar esto en el código existente.

5 Me gusta
62

@Johani
El error está asociado con el siguiente código, líneas 34 a 41:

        const setUpPreviewType = (pdf) => {
          if (previewMode === "Inline") {
            const preview = createPreviewElement();
            pdf.classList.add("pdf-attachment");
            pdf.append(preview);

            return preview;
          }
4 Me gusta
63

Esta solución parece funcionar para todos los navegadores.

4 Me gusta
64

pdf.parentNode.append(preview); parece funcionar (pero en caso de múltiples PDFs, las vistas previas aparecen debajo de todos los enlaces, no debajo de cada uno).

3 Me gusta
65

Pero si el nodo padre es el párrafo, entonces esto no debería ser un problema, ya que el enlace y el iframe estarán dentro de la etiqueta de párrafo.

Por lo tanto, para evitar este problema, simplemente puedes agregar un salto de línea entre los archivos adjuntos:

[doc1.pdf|adjunto](...)

[doc2.pdf|adjunto](...)

y con tu solución, la vista previa del PDF se mostrará correctamente en Chrome también.

3 Me gusta
66

Acabo de subir algunos cambios.

Sí, eso tiene más sentido que ignorar el archivo. Así es como funcionarán las cosas después de la actualización.

  1. Si configuras la opción en “Nueva pestaña”, el componente no adjuntará ninguna vista previa en las publicaciones. Si haces clic en el enlace, el PDF se abrirá en una nueva pestaña.

  2. Si configuras la opción en “En línea”, el componente adjuntará una vista previa en la publicación a todos los PDF de forma predeterminada. Si el nombre del archivo comienza con un espacio, no adjuntará la vista previa, pero al hacer clic en el enlace, el PDF se abrirá en una nueva pestaña en lugar de descargarse.

    Todos los visores de PDF nativos del navegador tienen un botón de descarga, por lo que puedes descargarlo desde allí si lo deseas.

Gracias por la depuración y los detalles @sharewoodsDavid. Resulta que las etiquetas <iframe> dentro de las etiquetas <a> no pasan la validación.

El elemento iframe no debe aparecer como descendiente del elemento a

Por lo tanto, tu solución es correcta. He realizado ese cambio en la PR de arriba.

Si quieres agregar un elemento después de otro elemento, puedes usar after() de la siguiente manera:

someElement.after(newElement)

Si quieres agregar un elemento antes de otro elemento, puedes usar insertBefore() de la siguiente manera:

// parentNode: el padre del elemento antes del cual quieres insertar
// newNode: el elemento que quieres insertar
// referenceNode: el elemento antes del cual quieres insertar

parentNode.insertBefore(newNode, referenceNode)

No. No hay servicios externos involucrados en esto. Así es como funciona.

  1. El usuario visita una publicación con un archivo PDF adjunto.
  2. El navegador del usuario solicita el archivo adjunto.
  3. El servidor lo envía al navegador del usuario.
  4. El navegador del usuario lo lee utilizando el visor de PDF integrado.

Eso es todo.

7 Me gusta
67

Perfecto, gracias @Johani. Confirmo que funciona en Chrome, FF y Safari. :+1:

3 Me gusta
68

¡Esto es genial! Muchas gracias. Lo he instalado y funciona. Justo lo que estaba buscando.

5 Me gusta
69

¿Será esto retroactivo para los pdf ya publicados en el foro?

2 Me gusta
70

Lo acabo de probar en mi sitio de prueba y parece que también funciona para los existentes, sin necesidad de ‘reconstruir html’. :+1:

6 Me gusta
71

Vi una actualización en el código fuente la semana pasada, así que supongo que este componente está activo. Pero lamentablemente, nunca me ha funcionado en ningún navegador. ¿Se debe quizás a la configuración segura de “medios”? ¿Soy el único que no puede hacer que esto funcione o es un problema común?

2 Me gusta
72

Nunca funcionó para mí tampoco.

2 Me gusta
73

El componente funciona bien. ¿Qué problema/error está viendo?

3 Me gusta
74

Solo vi un enlace de descarga normal de un archivo. No empecé a investigar más porque no era tan importante para mí, sería bueno tenerlo, nada más. Así que, lo siento, pero no puedo aclarar más esto.

Editar

Bueno, volví a comprobarlo; la última vez fue hace algún tiempo.

DiscourseHub muestra esto (iPad), y no hay errores en los registros de Discourse:

image
image2048×1536 177 KB

Pero cuando intenté usar Safari, mostró la primera página, pero no la segunda.

1 me gusta