Ich hoffe, gmail Anlage Vorschau wie Funktionalität mit angularjs

Question

zu erstellen Ich habe eine Anforderung, wo ich die Dateivorschau für die Benutzer anzeigen möchten.

Es gibt verschiedene Dateitypen, die unterstützt werden; .pdf, .xlsx, .doc, .rar, .jpeg, .png und viele mehr.

Wenn der Benutzer auf der Vorschau klickt sollte es die Datei in Popup öffnen, in der Vorschau der Datei ihn gezeigt wird. Benutzer kann hineinzoomen, auszoomen, Datei herunterladen. Genau wie Sie in Google Mail für die Vorschau des Anhangs sehen können.

Bitte kann mir jemand führen zu allen relevanten Bibliothek oder hilfreiche Ressource für das gleiche.

Vielen Dank im Voraus

Answer 1

Es gibt zwei Möglichkeiten, wie Sie dies tun können.

1) Server-Seite: Render-Vorschauen einmal serverseitigen (auf Datei-Upload) in JPG/PNG-Bilder, und speichern Sie die Vorschaubilder auf dem Server. Dies ist am einfachsten auf der Clientseite zu implementieren, erfordert jedoch zusätzlichen Speicherplatz auf dem Server.

2) Client-Seite: Rendern Sie die Vorschau "live" mit Javascript im Browser, dies reduziert die Menge, die der Server tun/speichern muss, aber erfordert den Client die Datei vollständig im Arbeitsspeicher herunterladen, bevor es rendern kann die Vorschau, die für große Dateien ein Problem sein könnte. Außerdem würden Sie wahrscheinlich Javascript-Bibliotheken für jeden einzelnen Dateityp benötigen, da die meisten Bibliotheken auf ein bestimmtes Dateiformat abzielen.

Server-Side ist wahrscheinlich der empfohlene Weg zu gehen. Was verwendest du für deinen Webserver?

Answer 2

Sie suchen nach dem Erstellen eines Dokument-Viewers.

Glauben Sie mir seine große Arbeit, weil Browser diese Formate nicht versteht. Der Browser kann Bilder direkt auf der Leinwand rendern, aber er weiß nicht, wie er die anderen Dateien rendern soll. Also, jede Datei außer Bildformaten, muss man sie vorübergehend auf dem Server speichern und dann im Browser streamen und sie mit dem jeweiligen Dateibetrachter anzeigen.

Sie können doc konvertieren und Dateien in PDF xlsx und zeigen diese Dateien PDF-Viewer (http://ngmodules.org/modules/ng-pdfviewer). Im Internet gibt es eine Vielzahl von Dokumentenkonvertern (allerdings müssen Sie die Lizenzbedingungen prüfen, da die meisten von ihnen GPL-lizenziert sind, hense kann nicht in kommerziellen Projekten verwendet werden).

Wenn Sie für Drittanbieter-Server speichern möchten, gehen diese Arbeit dann nehmen alle, Farbe Dokumente in html5 zu konvertieren wie https://crocodoc.com/why-crocodoc/

können Sie auch versuchen, google doc Viewer google doc veiwer

Answer 3

Diese Frage ist recht breit. Ich werde nicht alle Schritte zur Implementierung einer Anhangsbetrachter-Direktive durchgehen, aber hier sind einige Hinweise, die Sie nützlich finden könnten.

dem Benutzer zu ermöglichen, die Datei herunterzuladen, können Sie einfach einen Download-Link irgendwo setzen. Wenn Sie den Anhang auf Amazon S3, Google Cloud Storage oder einem anderen Cloud-Speicherdienst hosten, sehen Sie in der Dokumentation nach. Wenn Sie die Dateien von Ihrem eigenen Server herunterladen, stellen Sie sicher, dass die Content-Disposition HTTP-Response-Header auf attachment; filename="ORIGINAL_FILENAME" setzen, wo ORIGINAL_FILENAME sind die Dateinamen, den Sie Benutzer möchten im Speichern-Dialog, um zu sehen, die angezeigt wird, wenn sie den Download-Link klicken.

Jetzt auf den Betrachter.

Für PDF-Dateien würde ich pdfJS verwenden. Es gibt eine Winkelanweisung dafür here.

Sie könnten etwas wie CloudConvert für andere Dateien betrachten, um ehm in ein PDF umzuwandeln und sie dann in pdfJS anzuzeigen, aber dann möchten Sie wahrscheinlich das PDF zusätzlich zu den Originaldateien auf Ihrem Server speichern , die zusätzlichen Speicherplatz erfordert. Möglicherweise können Sie auch den Google Text & Tabellen-Viewer oder den Office 365-Viewer verwenden, wie in this answer beschrieben.