Spero di creare un'anteprima dell'allegato di Gmail come la funzionalità usando angularjs

Question

Ho un requisito in cui voglio mostrare l'anteprima del file agli utenti.

Ci sono vari tipi di file che sono supportati come; .pdf, .xlsx, .doc, .rar, .jpeg, .png e molti altri.

Quando l'utente fa clic sull'anteprima dovrebbe aprire il file in popup in cui viene visualizzata l'anteprima del file. L'utente può ingrandire, rimpicciolire, scaricare il file. Proprio come puoi vedere in gmail per l'anteprima degli allegati.

Per favore, chiunque può guidarmi a qualsiasi libreria pertinente o risorsa utile per lo stesso.

Grazie in anticipo

Answer 1

Ci sono due modi principali si può fare questo.

1) Lato server: consente di visualizzare le anteprime una volta sul lato server (su caricamento file) in immagini jpg/png e di memorizzare le anteprime sul server. Questo è il più semplice da implementare sul lato client, ma richiede spazio di archiviazione aggiuntivo sul server.

2) Lato client: il rendering delle anteprime "live" con javascript nel browser, riduce la quantità che il server deve eseguire/memorizza, ma richiede al client di scaricare completamente il file in memoria prima di poter eseguire il rendering l'anteprima, che per i file di grandi dimensioni potrebbe essere un problema. Inoltre, è necessario includere le librerie javascript per ogni singolo tipo di file, poiché la maggior parte delle librerie avrà come target un formato di file specifico.

Server-Side è probabilmente la soluzione consigliata. Cosa stai usando per il tuo server web?

Answer 2

Stai cercando di creare un visualizzatore di documenti.

Concedimi il suo grande lavoro dato che il browser non comprende questi formati. Il browser può eseguire il rendering delle immagini direttamente sulla tela ma non sa come eseguire il rendering degli altri file. Quindi, qualsiasi file diverso dai formati immagine, è necessario salvarli temporaneamente sul server e quindi eseguire lo streaming sul browser e mostrarli utilizzando il rispettivo visualizzatore di file.

È possibile convertire file doc e xlsx in pdf e visualizzare questi file utilizzando il visualizzatore di file PDF (http://ngmodules.org/modules/ng-pdfviewer). Esistono molti convertitori di documenti disponibili su Internet (tuttavia è necessario verificare i termini della licenza poiché la maggior parte di essi sono concessi in licenza GPL, pertanto non è possibile utilizzarli in progetti commerciali).

Se si desidera salvare questo lavoro poi per server di terze parti quelli prendono tutta la vernice per convertire documenti in HTML5 come https://crocodoc.com/why-crocodoc/

Si può anche provare a utilizzare visualizzatore di google doc google doc veiwer

Answer 3

Questa domanda è abbastanza ampio. Non sto passando tutti i passaggi su come implementare una direttiva visualizzatore allegati, ma qui ci sono alcuni suggerimenti che potresti trovare utili.

Per consentire all'utente di scaricare il file, è sufficiente inserire un collegamento per il download da qualche parte. Se stai ospitando l'allegato su Amazon S3, Google Cloud Storage o qualche altro servizio di cloud storage, controlla la loro documentazione. Se stai scaricando i file dal tuo server, assicurati di impostare l'intestazione della risposta HTTP Content-Disposition su attachment; filename="ORIGINAL_FILENAME", dove ORIGINAL_FILENAME è il nome del file che desideri venga visualizzato nella finestra di dialogo di salvataggio che appare quando fanno clic sul collegamento per il download.

Ora al visitatore.

Per i file PDF, utilizzerei pdfJS. C'è una direttiva angolare per questo here.

Si potrebbe guardare qualcosa come CloudConvert per altri file, per convertire ehm in un PDF, e quindi visualizzarli in pdfJS, ma probabilmente si desidera archiviare anche il PDF sul server, oltre ai file originali , che richiede spazio aggiuntivo. Potresti anche essere in grado di utilizzare il visualizzatore di Documenti Google o il visualizzatore di Office 365, come descritto in this answer.