Inline-PDF-Vorschauen

[omarfilip]

Ausgezeichnet! Danke @Johani. Ich kann bestätigen, dass es jetzt in allen drei Browsern funktioniert.

[nathank (Nathan Kershaw)]

Fantastisch – das sind solide Verbesserungen, die eindeutig viel Arbeit erfordert haben. Vielen Dank, dass ihr uns etwas nervige Mitverschwörer aus der Welt der Selbsthosting-Lösungen angehört habt!

Funktioniert die Komponente jetzt mit S3-Uploads?

[Johani (Joe)]

@nathank

Funktioniert die Komponente jetzt mit S3-Uploads?

Ich habe es noch nicht getestet, aber es sollte funktionieren, wenn dein Bucket korrekt konfiguriert ist. Diese Komponente stellt eine Anfrage, um das PDF zu laden.

javascripts/discourse/initializers/initialize-for-pdf-preview.js

Solche in JavaScript getätigten Anfragen werden blockiert, wenn der Ursprung keinen Zugriff auf die Datei hat. In diesem Fall tritt ein CORS-Fehler auf. Wenn du die Konsole prüfst, siehst du wahrscheinlich etwas Ähnliches wie hier:

Die Komponente kann daran wenig ändern. Dies muss alles in deiner S3-Konfiguration geregelt werden. Der Ursprung – deine Discourse-Domain – muss berechtigt sein, solche Anfragen zu stellen, um CORS-Probleme zu vermeiden.

[nathank (Nathan Kershaw)]

Danke! Ich werde mich gleich wieder mutig ins S3 stürzen.

Ein weiterer Vorschlag: Tab, wenn ein Leerzeichen vor dem Dateinamen steht

Mein Wunsch ist es, dass PDFs standardmäßig inline angezeigt werden und sich in einem neuen Tab öffnen, wenn ein Leerzeichen im Dateinamen enthalten ist. Das gibt Autoren die Möglichkeit, pro PDF zwischen Inline-Anzeige und Tab zu wählen, statt pro Komponente.

Vielleicht sollte die Komponenteneinstellung stattdessen lauten: „Welches Standardverhalten wünschen Sie?", und wenn ein Leerzeichen eingefügt wird, erfolgt die andere Option.

Alternativ könnte man auch abfragen, was das Leerzeichen bewirken soll (Inline / Tab / Download).

[omarfilip]

Aargh! Chrome zeigt wieder nur graue Kästen an. FF und Safari sind in Ordnung.

[Alon1 (Alon)]

Sendet diese Theme-Komponente die PDF an einen externen Interpreter?
Ich habe „Secure Media" aktiviert, da ich verhindern möchte, dass Dateien von einem externen Dienst geladen werden.

[sharewoodsDavid]

Ich habe herausgefunden, dass dies auf den folgenden Code zurückzuführen ist:

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

Wenn Sie den obigen Code durch den folgenden ersetzen:

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

funktioniert es.
Ich bin mir jedoch nicht sicher, wie man dies im bestehenden Code beheben kann.

[sharewoodsDavid]

@Johani
Der Fehler bezieht sich auf den folgenden Code, Zeile 34 bis 41:

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

            return preview;
          }

[sharewoodsDavid]

Diese Lösung scheint für alle Browser zu funktionieren.

[Benjamin_D (Benjamin Decotte)]

@sharewoodsDavid

Der Fehler hängt mit dem folgenden Code zusammen, Zeile 34–41:

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

pdf.parentNode.append(preview); scheint zu funktionieren (aber im Fall mehrerer PDFs werden die Vorschauen unter allen Links angezeigt, nicht unter jedem einzelnen).

[sharewoodsDavid]

Aber wenn der parentNode der Absatz ist, sollte dies kein Problem sein, da sich der Link und das iframe innerhalb des Absatz-Tags befinden.

Um dieses Problem zu umgehen, können Sie einfach eine neue Zeile zwischen die Anhänge einfügen:

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

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

Mit Ihrer Lösung wird die PDF-Vorschau auch in Chrome korrekt angezeigt.

[Johani (Joe)]

Ich habe gerade einige Änderungen gepusht.

DEV: Fix invalid markup (#6)

@nathank

Ich möchte, dass das PDF standardmäßig inline angezeigt wird und sich in einem neuen Tab öffnet, wenn ein Leerzeichen im Dateinamen steht.

Ja, das ergibt mehr Sinn, als die Datei einfach zu ignorieren. So wird es nach dem Update funktionieren:

1. Wenn du die Einstellung auf „Neuer Tab" setzt, fügt die Komponente keine Vorschau in Beiträgen ein. Wenn du auf den Link klickst, öffnet sich das PDF in einem neuen Tab.

2. Wenn du die Einstellung auf „Inline" setzt, fügt die Komponente standardmäßig für alle PDFs eine Vorschau im Beitrag ein. Wenn der Dateiname mit einem Leerzeichen beginnt, wird keine Vorschau eingefügt, aber beim Klicken auf den Link öffnet sich das PDF in einem neuen Tab, anstatt heruntergeladen zu werden.

   Alle nativen Browser-PDF-Viewer verfügen über eine Download-Schaltfläche, sodass du sie dort herunterladen kannst, falls gewünscht.

@omarfilip

Chrome zeigt wieder nur graue Kästen an.

@sharewoodsDavid

Wenn du den obigen Code durch Folgendes ersetzt:

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

funktioniert es.

Danke für das Debugging und die Details @sharewoodsDavid. Es stellt sich heraus, dass <iframe>-Tags innerhalb von <a>-Tags die Validierung nicht bestehen.

Das Element iframe darf nicht als Nachkomme des Elements a erscheinen.

Deine Lösung ist also genau richtig. Ich habe diese Änderung im oben genannten PR vorgenommen.

@Benjamin_D

pdf.parentNode.append(preview); scheint zu funktionieren.

Wenn du ein Element nach einem anderen Element hinzufügen möchtest, kannst du after() wie folgt verwenden:

someElement.after(newElement)

Wenn du ein Element vor einem anderen Element hinzufügen möchtest, kannst du insertBefore() wie folgt verwenden:

// parentNode: der Parent des Elements, vor das du einfügen möchtest
// newNode: das Element, das du einfügen möchtest
// referenceNode: das Element, vor das du einfügen möchtest

parentNode.insertBefore(newNode, referenceNode)

@Alon1

Sendet diese Theme-Komponente das PDF an einen externen Interpreter?

Nein. Es sind keine externen Dienste beteiligt. So funktioniert es:

1. Ein Benutzer besucht einen Beitrag mit einem PDF-Anhang.
2. Der Browser des Benutzers fordert den Anhang an.
3. Der Server sendet ihn an den Browser des Benutzers.
4. Der Browser des Benutzers liest ihn mit dem integrierten PDF-Viewer.

Das ist alles.

[omarfilip]

Perfekt – danke @Johani. Bestätigt, dass es in Chrome, FF und Safari funktioniert.

[spamless (Dallman Ross)]

@Johani

https://github.com/discourse/discourse-pdf-previews

Das ist großartig! Vielen Dank. Ich habe es installiert und es funktioniert! Genau das, wonach ich gesucht habe.

[kbpierson (KatieBeth Pierson)]

@Johani

Wie benutze ich es?

1. Installieren Sie die Komponente
2. Erlauben Sie PDF-Uploads
3. Aktualisieren Sie die Seite
4. Laden Sie eine PDF-Datei hoch

Das ist alles. Der Rest sollte automatisch funktionieren.

Wird dies rückwirkend auf bereits im Forum gepostete PDFs angewendet?

[JammyDodger]

Ich habe gerade auf meiner Testseite getestet, und es scheint, dass es auch für die vorhandenen funktioniert, ohne dass „HTML neu erstellt“ werden muss.

[Alon1 (Alon)]

Ich habe letzte Woche ein Update in der Quelle gesehen, daher gehe ich davon aus, dass diese Komponente funktioniert. Aber leider hat sie bei mir in keinem Browser funktioniert. Liegt es vielleicht an den sicheren “Medieneinstellungen”? Bin ich der Einzige, der das nicht zum Laufen bringt, oder ist das ein häufiges Problem?

[Jagster (Jakke Flemming)]

Hat bei mir auch nie funktioniert.

[omarfilip]

Die Komponente funktioniert gut. Welches Problem/welchen Fehler sehen Sie?

[Jagster (Jakke Flemming)]

Ich habe nur einen gewöhnlichen Download-Link für eine Datei gesehen. Ich habe nicht weiter gegraben, weil es für mich nicht so wichtig war, es wäre schön zu haben, nichts weiter. Also, tut mir leid, aber ich kann das nicht weiter aufhellen.

Bearbeiten

Nun, ich habe es noch einmal überprüft – das letzte Mal war vor einiger Zeit.

DiscourseHub zeigt dies (iPad) und keine Fehler in den Protokollen von Discourse:

Aber als ich versuchte, Safari zu benutzen, zeigte es die allererste Seite, aber nicht die zweite.