Visionneuses de documents : Outils libres (2/2)

Dans le cadre d’une veille technologique pour un de nos clients publics, nous avons étudié le sujet des visionneuses de documents. Il s’agit de permettre la lecture de fichiers bureautiques en ligne. L’article suivant constitue la 2ème partie sur les outils libres.

1. Critères de sélection

D’après le contexte de l’Administration et le cadre de l’étude, voici les critères retenus pour sélectionner les visionneuses de documents en ligne de ce panorama :

  • une intégration facile et simple dans Drupal ;
  • la lecture à minima des fichiers PDF ;
  • la prise en charge des documents stockés sur les serveurs de l’Administration ;
  • la gratuité de la solution au moins pour les fonctions de lecture basique ;
  • pas d’installation ou de configuration nécessaires sur le poste de l’agent (full web).

2. Microsoft Office Online

Licence : Freemium

Site officiel : https://office.com/

2.1. Présentation

La visualisation de documents en ligne est une fonctionnalité de la solution Office Online de Microsoft, anciennement baptisée Office Web Apps. Comme son nom l’indique, c’est une version limitée de la suite bureautique MS Office qui fonctionne entièrement dans le navigateur Internet. Le visionnage d’un document se fait sans enregistrement préalable et est gratuit.

2.2. Fonctionnement technique

La visionneuse de Office Online est disponible sur tous les navigateurs Internet récents sans aucune configuration préalable à faire. L’accès se fait via URL sans devoir s’identifier selon la syntaxe suivante :

https://view.officeapps.live.com/op/view.aspx?src=[URL cible]

où [URL cible] est le lien URL qui permet de télécharger directement le document en question. Ce lien doit être public pour que Office Online puisse le visualiser. L’intégration dans Drupal se fait donc simplement en incluant l’adresse URL ci-dessus dans n’importe quel texte.

Les fichiers pris en charge sont les documents Word, Excel et Powerpoint sous format binaire ou Open XML (doc, docx, xls, xlsx, ppt, pptx). Chaque fichier doit avoir une taille inférieure à 10MB pour Word et Powerpoint et inférieure à 5MB pour Excel. Il n’y a donc pas de support pour les documents au format ODF (odt, ods, odp) ni les fichiers en PDF.

À noter qu’il est possible d’installer gratuitement Office Web Apps Server sur un serveur Windows, ce qui permet de visualiser en ligne les documents hébergés en interne ou en externe.

À l’utilisation, l’interface semble assez fluide et réactive. Il est possible de faire des recherches textuelles, de zoomer, d’imprimer et de télécharger en PDF ou au format d’origine. Office Online offre même la possibilité de faire la traduction du document. Le rendu est assez fidèle au document d’origine.

office

Illustration 1 : Interface de MS Office Online avec un document de présentation

3. Google Drive

Licence : Freemium

Site officiel : https://www.google.com/drive/

3.1. Présentation

La visualisation de documents en ligne est une fonctionnalité de la solution Google Drive, encore connue sous le nom de Google Docs. Elle est entièrement gratuite. Le visionnage d’un document se fait sans enregistrement préalable.

3.2. Fonctionnement

De manière similaire à MS Office Online, la solution Drive de Google possède une fonctionnalité de visionneuse de documents disponible sur tous les navigateurs Internet récents sans aucune configuration préalable à faire. L’accès se fait via URL sans devoir s’identifier selon la syntaxe suivante :

https://drive.google.com/viewerng/viewer?url=[URL cible]

où [URL cible] est le lien URL qui permet de télécharger directement le document en question. Ce lien doit être public pour que Google Drive puisse le visualiser. L’intégration dans Drupal se fait donc simplement en incluant l’adresse URL ci-dessus dans n’importe quel texte.

Les fichiers pris en charge sont les documents Word, Excel et Powerpoint sous format Open XML et ODF, et les PDF. Les fichiers multimédias usuels (images et vidéos) et zippés sont également prises en charge. Aucune limite de taille n’est indiquée par Google.

À l’utilisation, l’interface semble assez fluide et réactive. Les commandes possibles sont de zoomer, d’imprimer et de télécharger en PDF ou au format d’origine. Le rendu peut cependant être différent par rapport à un logiciel bureautique.

drive
Illustration 2: Interface de Google Drive avec un document de présentation

4. ViewerJS

Licence : AGPL

Site officiel : http://viewerjs.org

Site projet : https://github.com/kogmbh/ViewerJS

4.1. Présentation

Financée par la fondation NLnet, ViewerJS est une combinaison de plusieurs outils Open Source basés sur le HTML et le JavaScript dont :

  • PDF.js est une bibliothèque JavaScript qui permet d’afficher les PDF en utilisant les standards Web. Le projet est mené par la fondation Mozilla. Notons ainsi qu’un lecteur basé sur PDF.js est inclus par défaut dans le navigateur Firefox
  • WebODF est une bibliothèque JavaScript qui permet d’afficher les documents ODF en utilisant les standards Web

Nous avons choisi de présenter ViewerJS car c’est un produit packagé assez complet. Il existe bien évidemment d’autres solutions de visionnage de documents basées sur PDF.js et WebODF mais les fonctionnalités sont très similaires.

ViewerJS permet ainsi d’afficher des documents textes, des présentations, des feuilles de calcul et documents textes au format ODF, des PDF et des images.

ViewerJS fonctionne avec les navigateurs Firefox et Chrome sous Windows et sous Linux. Cependant Internet Explorer que ce soit la version 8 ou 9 ne fonctionne pas correctement1.

Le format MS Office (doc, docx, xls, xlsx, ppt, pptx) n’est pas pris en charge. Il est donc nécessaire de convertir au préalable ces fichiers en PDF ou ODF.

Il est éventuellement possible de faire une conversion automatique de fichiers MS Office vers PDF ou ODF par une version de Libre Office installée sur un serveur (via le module JODConverter). Cette solution peut être étudiée en détail si l’Administration le souhaite.

viewerjs

Illustration 3: Interface de ViewerJS avec un document texte

4.2. Fonctionnement technique

ViewerJS fonctionne avec tous les serveurs Web. Il suffit de le télécharger (taille 2MB) sur la racine du serveur Web de préférence. Ensuite pour tous les liens de documents, il suffit de changer le code source HTML de :

<a href= »/path/to/filename.ext »>

où /path/to/filename.ext est l’adresse absolue du document à afficher, en :

<a href= »/ViewerJS/#../path/to/filename.ext »>

Il existe également des plugins pour les gestionnaires de contenus courants dont Drupal qui permet d’insérer la visualisation de documents de manière plus simple.

3.3.1.3. Intégration Drupal de ViewerJS

Il existe un module ViewerJS pour Drupal sur Github2. L’intégration ne pose pas de difficulté particulière. L’auteur attache comme normalement le(s) document(s) dans l’article qu’il souhaite publier. Le document se présentera sous la forme d’une petite vignette avec un choix entre le téléchargement et la prévisualisation. La prévisualisation ouvrira un nouvel onglet sous ViewerJS où sera affiché le document.

viewserjs2

Illustration 4: Intégration de ViewerJS dans Drupal


4. Flexpaper

Licence : Open Source / Commerciale

Site officiel : http://flexpaper.devaldi.com

4.1. Présentation de Flexpaper

La société néo-zélandaise Devaldi se spécialise dans la publication digitale professionnelle. Si seuls les fichiers PDF sont pris en charge, Flexpaper comporte de nombreuses fonctionnalités avancées dont la plupart sont payantes :

  • Ajout de liens Web (vidéo, image, son,…)
  • Personnalisation de l’interface
  • Annotations collaboratives en ligne
  • Affichage adaptatif (interface tactile pour tablettes et smartphones)
  • Mesure d’audience avec Google Analytics

flexpaper

Illustration 5: Interface de Flexpaper avec la fonction d’annotations collaboratives en ligne


Devaldi propose également un autre produit, Flexpaper Zine adapté aux magazines, catalogues et autres publications de haute qualité. L’affichage se fait en mode brochure avec des effets spéciaux pour le défilement des pages. Toutes les fonctions de Flexpaper sont présentes sauf les annotations collaboratives en ligne.

flexpaper2

Illustration 6: Interface du mode brochure (Flexpaper Zine)


Le tableau suivant résume les trois versions commerciales de Flexpaper :

Intitulé

Open Source

Commerciale

Illimitée

Produits proposés

Flexpaper

Flexpaper

Flexpaper Zine

Flexpaper

Flexpaper Zine

Licence

GPLv3

Propriétaire (1)

Propriétaire (2)

Marque blanche

Non

Oui

Oui

Nombre de domaines

Illimité

1

Illimité

Fonctionnalités avancées

Aucune

Interface personnalisable

Affichage adaptatif

Interface personnalisable

Affichage adaptatif

Annotations collaboratives en ligne (3)

Version à jour

Non

Oui

Oui

Coût de la licence (à vie)

gratuit

149 USD

995 USD

(1) La licence permet d’accéder et d’adapter le code source de Flexpaper

(2) La licence permet d’accéder, d’adapter le code source de Flexpaper et d’en faire une réutilisation commerciale.

(3) Fonctionnalité spécifique à Flexpaper

3.2. Fonctionnement technique de Flexpaper

Pour l’hébergement, Flexpaper nécessite un serveur en PHP ou ASP.net et l’utilisation d’un certain nombre de modules complémentaires. Toutes les versions proposent les fonctions de téléchargement progressif et partiel qui permettent de mieux utiliser la bande passante. Flexpaper peut fonctionner soit en Flash soit en HTML5.

L’intérêt d’Adobe Flash est le graphisme vectoriel qui permet d’avoir une qualité d’affichage plus élevé. De plus avec cette technologie, il est possible de personnaliser très facilement l’interface de Flexpaper avec un logiciel bureautique (ajout, supression, emplacement et taille des boutons) et ensuite de télécharger le contenu sur le serveur.

Avec le HTML, il n’est pas nécessaire de préparer le fichier à l’avance. La configuration de l’interface et la requête de lecture se font directement en lignes de commande en utilisant par exemple le code suivant :

$(‘#documentViewer’).FlexPaperViewer(

{ config : {

PDFFile : ‘pdf/Paper.pdf’,

RenderingOrder : ‘html5’

}});

où pdf/Paper.pdf est l’adresse du fichier à afficher

3.3. Intégration Drupal de Flexpaper

Il existe un module Flexpaper dans Drupal3. Il n’est cependant pas très utilisé (600 téléchargements au total et 86 sites l’utilisent au 19/11/2014). Nous n’avons pas réussi au moment de l’écriture de ce rapport à faire fonctionner correctement le module dans la version 7 de Drupal.

Le module Drupal de Flexpaper utilise la technologie Flash exclusivement (via Swftools) et il n’existe pas de version en HTML.

Il est envisageable de retravailler le module Drupal à partir du code source de Flexpaper

4. Synthèse du panorama des visionneuses de documents

Le tableau suivant résume les fonctionnalités des différentes visionneuses :

MS Office Online

Google Drive

ViewerJS

Flexpaper

Licence

Propriétaire

Propriétaire

Open Source

Open Source Propriétaire

Type de solution

Interne (1)
Externe

Externe

Interne

Interne

Intégration Drupal

Limité (2)

Limité (2)

Oui

Limité (3)

Technologie utilisée

URL

URL

Module HTML

Module Flash (3)

Support des documents en accès restreint

Oui (1)

Non

Oui

Oui

Format MS Office

Oui

Oui

Non (4)

Non

Format ODF

Non

Oui

Oui

Non

Format PDF

Non

Oui

Oui

Oui

Fichiers multimédias

Non

Non

Non

Non

Fonctions intégrées

Zoom

Recherche

Traduction

Zoom

Recherche

Zoom

Zoom

Recherche

Annotations collaboratives (5)

(1) Via l’installation de Office Web Apps Server sur un serveur Windows

(2) Redirection vers un site externe

(3) Le module Drupal de Flexpaper utilise uniquement la technologie Flash ce qui pose des problèmes d’intégration

(4) Il est possible d’étudier la conversion automatique des fichiers MS Office en PDF et ODF via par exemple JODConverter4 (utilisation de LibreOffice sur un serveur)

(5) Uniquement disponible dans la version illimitée (payante)

4. Visionneuses en ligne de fichiers multimédias

La lecture en ligne des fichiers multimédias a un fonctionnement différent de celle des documents bureautiques d’où l’absence d’une visionneuse en propre qui intégrerait les deux. Nous allons brièvement présenter les solutions de visionneuses en ligne des fichiers multimédias qui sont en open source et s’intègrent bien dans Drupal.

Le tableau ci-dessous, présente les quatre visionneuses les plus utilisées sous Drupal :

MediaElement.js

jPlayer

Video.js

OSM (Mediafront)

Site officiel

http://mediaelementjs.com/

http://jplayer.org/

http://www.videojs.com/

http://mediafront.org/

Technologies supportées (1)

HTML5
Adobe Flash
Silverlight (2)

HTML5
Adobe Flash

HTML5
Adobe Flash
Silverlight (2)

HTML5
Adobe Flash

Licence

GPL v2
MIT

MIT

GPL v3

MIT

Bibliothèque JavaScript nécessaire

jQuery

jQuery

Aucune

jQuery

Interface personnalisable

Oui

Oui

Oui

Oui

Mode
plein écran

Oui

Oui

Oui

Oui

Support Drupal

7.x

6.x, 7.x

6.x 7.x

6.x 7.x

Dernière
mise à jour

15 novembre 2014

21 novembre 2014

24 septembre 2014

30 septembre 2011

Support des sous-titres

Oui

Limité

Oui

Non

Support mobile

Oui

Oui

Oui

Limité

Statut

Actif

Actif

Actif

Semi-Actif

Nb de sites Drupal recensés

12 390

8 687

9 865

7 246

Nb de téléchargements recensés

152 577

38 703

53 240

72 125

(1) Sous réserve de disponibilité sur les navigateurs et les systèmes d’exploitation concernés

(2) Silverlight a été déprécié par Microsoft et ne sera plus supporté

Sources : https://www.drupal.org

Nous voyons que deux solutions sortent du lot. Video.js a la réputation d’être un lecteur en ligne assez léger tandis que MediaElement.js assure la plus grande compatibilité notamment avec les appareils mobiles. L’Administration peut donc décider d’intégrer l’une des deux solutions sur sa plateforme sous Drupal en fonction de ses besoins.

Références

1https://github.com/mozilla/pdf.js/wiki/Frequently-Asked-Questions#what-browsers-are-supported

2https://github.com/Strae/Drupal-ViewerJs

3https://www.drupal.org/project/flexpaper

4https://www.drupal.org/sandbox/wdki/2083439