Inline-Vorschauen für PDFs

[Discourse]

	Zusammenfassung	Inline PDF-Vorschauelemente ist eine Desktop-nur-Theme-Komponente, die es Ihnen ermöglicht, Vorschauelemente für PDF-Anhänge zu erstellen.
	Vorschau	Vorschau auf Discourse Theme Creator (nur Desktop)
	Repository-Link	https://github.com/discourse/discourse-pdf-previews
	Neu bei Discourse-Themes?	Einsteigerleitfaden zur Verwendung von Discourse-Themes

Installieren Sie diese Theme-Komponente

Da es sich um eine offizielle Theme-Komponente handelt, die vom Discourse-Team gepflegt wird, können Support, Contribute > Bug, Contribute > UX und #contribute:feature-Anfragen in den jeweiligen Kategorien hier auf Meta gestellt und mit dem entsprechenden Theme-Komponenten-Tag versehen werden. Klicken Sie auf einen der unten stehenden Links, um eine Anfrage zu starten.

 Support  Bug  UX  Feature

Funktionen

vorher

nachher

Wie oben erwähnt, funktioniert diese Komponente nur auf dem Desktop. Es gibt kaum einen Nutzen, Vorschauelemente auf Mobilgeräten anzuzeigen, da alles so klein und schwer lesbar sein wird.

Diese Komponente nutzt die native Browser-Implementierung, um die PDFs darzustellen, daher werden die Ergebnisse in verschiedenen Browsern unterschiedlich aussehen.

Bitte beachten Sie auch, dass PDF-Uploads in Discourse standardmäßig nicht erlaubt sind. Wenn Sie Ihren Benutzern erlauben möchten, PDF-Dateien hochzuladen, müssen Sie diese Erweiterung entweder zu authorized_extensions hinzufügen, wenn alle Benutzer PDFs hochladen können sollen, oder zu authorized_extensions_for_staff, wenn Sie dies auf Mitarbeiter beschränken möchten.

Wenn Sie S3 verwenden, müssen Sie möglicherweise auch Ihre CORS-Richtlinie aktualisieren. Bitte sehen Sie untenstehenden Beitrag: Inline PDF Previews - #106 by JammyDodger

Wie benutze ich es?

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

Das war’s. Der Rest sollte automatisch funktionieren.

Einstellungen

Name	Beschreibung
Vorschau-Modus	Inline: PDF-Anhänge werden inline innerhalb der Beiträge gerendert Neuer Tab: Links zu PDF-Anhängen öffnen einen neuen Tab, in dem das PDF gerendert wird

Zusätzliche Funktionen

Wenn Sie möchten, dass ein einzelnes PDF nicht inline gerendert wird, können Sie einfach ein Leerzeichen vor dem Dateinamen hinzufügen - z. B.:

Dies wird inline angezeigt

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

Dies wird nicht inline angezeigt

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

Von uns gehostet? Theme-Komponenten sind auf unseren Standard-, Business- und Enterprise-Plänen verfügbar.

[travelvc (Ian C)]

Ich hoste meine Uploads und Bilder auf S3, und die Vorschau wird durch eine „CORS-Richtlinie: Kein Header ‚Access-Control-Allow-Origin’ vorhanden“ blockiert.

Hier ist die Ausgabe der Chrome-Konsole:

Der Zugriff auf den Abruf von 'https://travelmassive-discourse-cdn.s3.dualstack.us-west-1.amazonaws.com/original/2X/b/b578f6364592121964e6a2fd4969e5c1222bd909.pdf' (umgeleitet von 'https://lounge.travelmassive.com/uploads/short-url/pTnA3r043WfhDK8HSdPQrtNn8Lf.pdf') wurde von der Ursprungsadresse 'https://lounge.travelmassive.com' aufgrund einer CORS-Richtlinie blockiert: Auf der angeforderten Ressource ist kein Header 'Access-Control-Allow-Origin' vorhanden. Wenn eine undurchsichtige Antwort Ihre Anforderungen erfüllt, setzen Sie den Modus der Anforderung auf 'no-cors', um die Ressource mit deaktiviertem CORS abzurufen.

Update

Ich habe das Problem behoben, indem ich die folgende CORS-Richtlinie in die Konfiguration meines S3-Buckets aufgenommen habe.

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

[Ed_Bobkov (Ed)]

@travelvc

<AllowedOrigin>https://mydiscourse.url/</AllowedOrigin>

Es ist wichtig hinzuzufügen: Wenn Sie in der Fehlermeldung den Text from origin 'https://lounge.travelmassive.com' has been sehen, wobei Ihre Domain ohne schrägen Strich / am Ende angegeben ist, dann müssen Sie in der CORS-Konfiguration Ihre Domain ebenfalls ohne schrägen Strich am Ende hinzufügen, wie folgt:
https://mydiscourse.url

[Johani (Joe)]

@Jeremie_Leroy

Könnte es ein Konflikt mit anderen Plugins sein?

Ich habe festgestellt, dass Ihre Uploads auf AWS gehostet werden. Das Problem liegt wahrscheinlich also im Zusammenhang mit CORS (die Komponente ist für mich auf Ihrer Seite nicht aktiv, um dies zu bestätigen). Schauen Sie sich den Beitrag unter Ihrem an.

@travelvc

Ich konnte dies beheben, indem ich die folgende CORS-Richtlinie in der Konfiguration meines S3-Buckets hinzugefügt habe.

@Ed_Bobkov

Es ist wichtig hinzuzufügen, dass, wenn Sie diesen Text in der Fehlermeldung sehen: from origin 'https://lounge.travelmassive.com' has been, wo Ihre Domain ohne Schrägstrich / am Ende steht.

Danke, dass Sie das geteilt haben!

Bitte beachten Sie, dass dieses Problem nur Self-Hoster betrifft, die etwas wie S3 eingerichtet haben. Self-Hoster, die kein S3 verwenden, werden auf dieses Problem nicht stoßen. Kunden, die von CDCK gehostet werden, müssen sich ebenfalls keine Sorgen machen, da dies bereits eingerichtet ist.

Das heißt, die CORS-Konfiguration liegt etwas außerhalb des Rahmens dieses Themas. Wenn Ihr Upload-Bucket den Zugriff auf Ihre eigene Domain nicht zulässt, muss dies unabhängig davon behoben werden, da dies zu weiteren Problemen führen könnte.

@rishabh

Ich habe das gleiche Problem.

Ich bin mir nicht ganz sicher, was hier passiert ist. Beide Fälle scheinen bei jedem Versuch für mich zu funktionieren. Wir können das einfach auf ein vorübergehendes Netzwerkproblem zurückführen, aber lassen Sie es mich bitte wissen, falls Sie es erneut sehen

Ich habe ein kleines Update für diese Komponente veröffentlicht, das die wahrgenommene Ladezeit verbessern sollte. Es gibt jetzt einen Platzhalter basierend auf der Theme-Farbe anstelle der standardmäßigen Browser-Iframe-Stile. Dieser wird nur angezeigt, während die Datei geladen wird, sodass Sie ihn zu 99 % der Zeit gar nicht bemerken werden.

Da die meisten PDFs sofort geladen werden, hielt ich es nicht für sinnvoll, einen Ladebalken hinzuzufügen.

[pacharanero (Marcus Baw)]

Wäre es möglich, die PDF-Vorschau zu unterdrücken, indem ein Leerzeichen vor den Upload-Link gesetzt wird, ähnlich wie bei der Oneboxing-Funktion? Manchmal möchte man eine Liste von Dokumenten und keine Vorschauen. Manchmal möchte man eine Vorschau.

[paulrudy]

Ich nutze Safari unter macOS Catalina und habe keine Einstellungen, die die PDF-Anzeige im Browser deaktivieren – beispielsweise wird http://www.orimi.com/pdf-test.pdf problemlos angezeigt. Dennoch erscheint beim Anzeigen der Vorschau im Theme-Creator das Fenster/die Meldung „Blockiertes Plug-in".

Die sitzungsspezifischen Einstellungen in den Safari-Einstellungen unterscheiden sich nicht von denen anderer Websites.

Tritt dies bei anderen auf?

[paulrudy]

Bei mir funktioniert es auf Safari unter macOS Big Sur immer noch nicht. Es gibt keine besonderen Einstellungen für Blog-Plugins, und andere PDFs werden im Browser angezeigt.

Safari Web Inspector meldt folgende Fehler beim Laden der Vorschauseite in theme-creator:
Unbekannte Content-Security-Policy-Direktive 'worker-src'.
Laden von blob:https://theme-creator.discourse.org/7b9b62c7-e782-4080-a521-04e3b06aa142 abgelehnt, da es nicht in der object-src-Direktive der Content Security Policy aufgeführt ist.

[nathank (Nathan Kershaw)]

@pacharanero

Wäre es möglich, die PDF-Vorschau zu unterdrücken, indem man ein Leerzeichen vor den Upload-Link setzt, ähnlich wie bei Oneboxing?

Das wäre eine enorme Verbesserung für diese Komponente! Ist das machbar, @Johani?

[Freez (Damien Lecan)]

@paulrudy

Der Safari Web Inspector meldet beim Laden der Vorschauseite im Theme-Creator folgende Fehler:
Unbekannte Content-Security-Policy-Direktive 'worker-src'.
Laden von blob:https://theme-creator.discourse.org/7b9b62c7-e782-4080-a521-04e3b06aa142 abgelehnt, da es nicht in der object-src-Direktive der Content Security Policy aufgeführt ist.

Das gleiche Problem tritt bei mir in Firefox auf, jedoch erst nach dem zweiten Besuch
Gibt es eine Workaround-Lösung dafür? Eine manuelle Deklaration in der CSP-Konfiguration?

Vielen Dank

[nathank (Nathan Kershaw)]

Bei mir funktioniert das auf meiner Website nicht mehr. Anstelle der PDF-Vorschau erscheint ein großes schwarzes Feld:

Das Deaktivieren von Plugins über den abgesicherten Modus bringt nichts, genauso wenig wie das Entfernen aller anderen Theme-Komponenten.

Das Problem trat auf, nachdem Bild- und Datei-Uploads auf S3 umgestellt wurden, was möglicherweise die Ursache ist. Ich hoffe nicht, denn sie lassen sich nicht einfach zurückverlegen!

Ich bin ratlos. Schade, denn es ist eine großartige Komponente. Haben Sie irgendwelche Vorschläge?

[keven]

Ich sehe das gleiche Verhalten, wenn S3-Uploads aktiviert sind.

[Benjamin_D (Benjamin Decotte)]

Kannst du die PDF immer noch herunterladen?
Bei mir funktioniert es noch (S3 + gesicherte Medien und kein CDN)

[nathank (Nathan Kershaw)]

@Benjamin_D

Kannst du das PDF immer noch herunterladen?

Ja, das können wir. Wir haben die gleiche Einrichtung wie du (glaube ich).

[Benjamin_D (Benjamin Decotte)]

• Meine Links in den Nachrichten haben das Format domain/secure-media-uploads/meta/original/...
• Aber in der Konsole/Netzwerkansicht kann ich sehen, dass die tatsächlichen Downloads aus dem Bucket kommen.
  Sieht man die AMZ-Anmeldeinformationen?

Falls nicht, könnte dies vielleicht helfen?

@martin

Wenn Sie möchten, dass alle Uploads rückwirkend analysiert und ggf. als sicher markiert werden, führen Sie den Rake-Task uploads:secure_upload_analyse_and_update aus.

Ich erinnere mich auch, dass etwas Seltsames passierte, als ich versuchte, einen Beitrag aus Kategorien zu verschieben (oder war es ein Kopieren/Einfügen?). Es funktionierte schließlich, als ich die Datei erneut hochgeladen habe.

[reclaimedpress]

Ich erlebe dieses gleiche Verhalten bei einer frischen Discourse-Installation und einem neuen PDF-Anhang.

[nathank (Nathan Kershaw)]

@Benjamin_D

Vielleicht hilft das ja?

Danke @Benjamin_D. Es stellt sich heraus, dass ich keine sicheren Uploads aktiviert habe, und meine Links sehen alle gut aus und funktionieren einwandfrei, wie zum Beispiel dieser:

The HiNZ eHealth Forum - trusted online digital health discussion

Also bin ich ratlos – besonders, warum es in zwei Foren funktioniert, die ich betreibe, und nicht im anderen – wobei S3 der einzige Unterschied ist. Und dass es bei dir mit S3 funktioniert. Ich bin wirklich verwirrt.

[hollosch]

Nach dem Update auf die neueste Version von Discourse werden die PDF-Anhänge nicht mehr angezeigt. Was könnte das Problem sein?

[omarfilip]

Es könnte ein Konflikt mit einer anderen Komponente oder einem anderen Theme vorliegen. Bei mir funktioniert es wie erwartet. Beginnen Sie damit, andere Komponenten zu deaktivieren, und testen Sie das Standard-Theme, falls Sie ein anderes verwenden. Genauso verfahren Sie mit Plugins.

[nathank (Nathan Kershaw)]

@nathank

Also, ich stehe auf dem Schlauch – besonders, warum es in zwei Foren funktioniert, die ich betreibe, und im anderen nicht – wobei S3 der einzige Unterschied ist. Und dass es bei dir mit S3 funktioniert. Ich bin wirklich verwirrt.

Ok – ich habe Fortschritte gemacht. Das Deaktivieren von S3-Uploads behebt das Problem bei neuen Uploads. Aber ich bleibe mit einem S3-/Lokal-Chaos zurück, wenn ich diesen Weg gehe!

Es könnte sein, dass ich die CDN-Sache (CloudFront) nicht verwende, die die nervigen Fehler auf der Admin-Seite verursacht. Ich werde es versuchen, das einzurichten, und schauen, ob das funktioniert.

später – nein, ein CDN macht keinen Unterschied.

viel später – habe S3-Uploads erfolgreich entfernt (mit etwas Schweiß), also ist jetzt alles in Ordnung.

Jetzt bin ich darauf erpicht, es zu verbessern! Ist jemand mit den entsprechenden Fähigkeiten interessiert, das zu versuchen?

@pacharanero

Wäre es möglich, die PDF-Vorschau zu unterdrücken, indem man ein Leerzeichen vor den Upload-Link setzt, wie bei Oneboxing? Manchmal möchte man eine Liste von Dokumenten und keine Vorschauen. Manchmal möchte man eine Vorschau.

[thoka (Thomas Kalka)]

Ich suche nach einem Plugin, mit dem sich PDFs in einem neuen Tab öffnen lassen.
Aktuell erlaubt mein Discourse nur den Download.
Wäre das mit einem ähnlichen Theme möglich?