PDF sur une page WEB, conversion auto en swf

Dans la Gestion électronique de documents de mon intranet. j'affiche les documents en PDF sur la page web. J'utilise la balise HTML objet. comme ceci

<div style="height: 600px; width: 800px;">
        <object data="fichiers.php?filename=PRC-SOI-001.pdf" type="text/html" codetype="application/pdf" style="height: 600px; width: 800px;">
        </object>
</div>

C'est moche mais ça marche bien sur tous les windows (que le navigateur soit internet explorer ou firefox) tant que Adobe reader est installé. Au travail, ça marche bien sur tous les postes sauf le mien buhaaaa (linux). C'est assez frustrant d'avoir développé un truc (tout l'intranet) et de ne pas pouvoir l'utiliser.

Il y a d'autres solutions plus simples, mais qui font passer les documents par un service tiers. je souhaite assurer une certaine confidentialité de ces derniers.

Ce tutoriel/mémo va donc aborder l'installation un convertisseur pdf2swf sur le serveur, puis un "exec()" en php pour les convertir des leur upload. Enfin, on verra vite fait l'utilisation de FlexPaperViewer pour les visionner sur une page web.

Les prérequis

Avoir la main sur le serveur. Un hébergement mutualisé ne suffira pas car on va devoir installer des paquets. A moins que l'hébergeur soit sympa. Me contacter pour un devis.
J'utilise une debian 5 sur le serveur de production, avec apache2 mysql, php5. Cependant les premiers essais, je les ai fait sur une fedora, ça marchera aussi très bien là dessus.

Installation de swftools à partir des sources

swftools contient les outils pour convertir un pdf en swf en ligne de commande.

En root sur le serveur, télécharger, extraire, compiler. la dernière version de swftools (à la date d'écriture de ce billet c'est la 0.9.1)

Télécharger et extraire

wget http://www.swftools.org/swftools-0.9.1.tar.gz
tar -zxvf swftools-0.9.1.tar.gz 
rm swftools-0.9.1.tar.gz

Préparer la compilation

cd swftools-0.9.1/
./configure

Dans les retours du script configure, il faut vérifier que ça c'est bien passé. Dans mon cas il me prévient qu'il manque des dépendances:

***************************************************
* The following headers/libraries are missing:  jpeglib ungif jpeglib.h freetype gif_lib.h
* Disabling pdf2swf tool...
* Disabling jpeg2swf tool...
* Disabling gif2swf tool...
***************************************************

et du coup il désactive justement le truc qui m'intéressait

Installer les dépendances manquantes (adaptez en fonction du retour de ./configure) Dans mon cas:

apt-get install libjpeg62-dev
apt-get install libgif-dev
apt-get install libfreetype6-dev

et réexutez le ./configure

./configure

Compiler:

make
make install

tester pdf2wfs

la conversion du fichier "fichier.pdf" en swf "fichier.swf" se fait pas la ligne de commande suivante:

pdf2swf fichier.pdf -o fichier.swf

Vous pouvez le tester en déposant le fichier sur un site web.

On sait donc à présent convertir un pdf en swf. Je vais me refaire du café avant d'attaquer la modification de mon script d'upload. Au passage, le script bash pour appliquer ce traitement à tous les pdf d'un repertoire:

#!/bin/bash
# 
 
for element in *
do
   if  [ "${element##*.}" = "pdf" ]
   then
	  pdf2swf $element -o ${element%.*}.swf
  fi 
done

Modification du script d'upload en php^[1]

J'ajoute simplement la commande suivante à la fin pour que le script execute pdf2swf:

exec('pdf2swf '.$content_dir.$name_file.' -o '.$content_dir.basename($content_dir.$name_file, '.pdf').'.swf');

Ci dessous un exemple vite fait (que j'ai quand même pris le temps de valider au w3c validator). Cliquez sur le bouton pour le voir, je ne souhaitais pas alourdir ce billet ^[2] Sur l'intranet, il y a bien évidemment les vérifications comme qui l'utilisateur est identifié et a bien les droits.

l'exemple complet :

Vite fait un exemple (que j'ai quand même pris le temps de valider au w3c validator). Sur l'intranet, il y a bien évidemment les vérifications comme qui l'utilisateur est identifié et a bien les droits. Le formulaire html basique

<!doctype html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

	<title>Test d'upload</title>
</head>
<body>
	<form method="post" action="testupload.php" enctype="multipart/form-data">

		<input name="file" type="file"/><input type="submit" value="uploader" />

	</form>
</body>

Le fichier testupload.php qui est appelé lors de la validation du formulaire.

<?php
//name="fichieroriginal
$content_dir = $_SERVER["DOCUMENT_ROOT"]."/documents/"; // dossier où sera déplacé le fichier

$tmp_file = $_FILES['file']['tmp_name']; //le nom du fichier temporaire qui vient d'etre uploadé (il sera supprimé automatiquement à la fin du script)
 
if( !is_uploaded_file($tmp_file) )

{
	echo "Le fichier est introuvable";
	die;
}
// on vérifie maintenant l'extension
    $type_file = $_FILES['file']['type'];

 
    if( !strstr($type_file, 'pdf') && !strstr($type_file, 'PDF') )

    {
        exit("Le fichier n'est pas un PDF");
    }
 
   // on copie le fichier dans le dossier de destination

    $name_file = $_FILES['file']['name'];
 
    if( !move_uploaded_file($tmp_file, $content_dir . $name_file) )

    {
        exit("Impossible de copier le fichier dans $content_dir");
    }
 
   exec('pdf2swf '.$content_dir.$name_file.' -o '.$content_dir.basename($content_dir.$name_file, '.pdf').'.swf');

?>

Maintenant nos fichier sont tansformés lors de l'upload. Plus qu'à installer la visionneuse.

Integration de FlexPaperviewer dans une page html

Telechargez FlexPaperviewer http://flexpaper.devaldi.com/
Et poussez tous les fichiers sur la racine de votre site.

Dans la page ou vous voulez visionner un document, débrouillez vous :p pour que le header (entre <head> et </head>) contienne:

<style type="text/css" media="screen"> 
			#flashContent { display:none; }
        </style> 
<script type="text/javascript" src="js/swfobject/swfobject.js"></script>
		<script type="text/javascript">
			if(window.addEventListener)
			window.addEventListener('DOMMouseScroll', handleWheel, false);
			window.onmousewheel = document.onmousewheel = handleWheel;
 
			if (window.attachEvent) 
			window.attachEvent("onmousewheel", handleWheel);
 
			function handleWheel(event){
				try{
					if(!window.document.FlexPaperViewer.hasFocus()){return true;}
					window.document.FlexPaperViewer.setViewerFocus(true);
					window.document.FlexPaperViewer.focus();
 
					if(navigator.appName == "Netscape"){
						if (event.detail)
							delta = 0;
						if (event.preventDefault){
							event.preventDefault();
							event.returnValue = false;
							}
					}
					return false;	
				}catch(err){return true;}		
			}
 
			function onExternalLinkClicked(link){
			   window.location.href = link;
			}			
		</script>
 
        <script type="text/javascript"> 
            <!-- For version detection, set to min. required Flash Player version, or 0 (or 0.0.0), for no version detection. --> 
            var swfVersionStr = "9.0.124";
            <!-- To use express install, set to playerProductInstall.swf, otherwise the empty string. -->
            var xiSwfUrlStr = "${expressInstallSwf}";
            var flashvars = { 
                  SwfFile : escape("http://www.tinaderp.com/tinaderp/fichiers.php?filename=CRA-BLA-003.swf"),
				  Scale : 0.6, 
				  ZoomTransition : "easeOut",
				  ZoomTime : 0.5,
  				  ZoomInterval : 0.1,
  				  FitPageOnLoad : false,
  				  FitWidthOnLoad : true,
  				  PrintEnabled : true,
  				  FullScreenAsMaxWindow : false,
				  ProgressiveLoading : true,
  				  localeChain: "fr_FR"
				  };
			 var params = {
 
			    }
            params.quality = "high";
            params.bgcolor = "#ffffff";
            params.allowscriptaccess = "sameDomain";
            params.allowfullscreen = "true";
            var attributes = {};
            attributes.id = "FlexPaperViewer";
            attributes.name = "FlexPaperViewer";
            swfobject.embedSWF(
                "FlexPaperViewer.swf", "flashContent", 
                "100%", "600", 
                swfVersionStr, xiSwfUrlStr, 
                flashvars, params, attributes);
		swfobject.createCSS("#flashContent", "display:block;text-align:left;");
 
</script>

Et oui c'est dans le header qu'on définit le fichier qui sera visualisé. ça oblige de le générer en php pour pourvoir adapter la variable SwfFile : escape("votre fichier"),

Ensuite pour le placer sur la page, dans le body:

<div id="flashContent">
	        		<p>
		        	To view this page ensure that Adobe Flash Player version
					9.0.124 or greater is installed.
				</p>
				<script type="text/javascript">
					var pageHost = ((document.location.protocol == "https:") ? "https://" :	"http://");
					document.write("<a href='http://www.adobe.com/go/getflashplayer'><img src='"
									+ pageHost + "www.adobe.com/images/shared/download_buttons/get_flash_player.gif' alt='Get Adobe Flash player' /></a>" );
				</script>
	       		</div>

Comme indiqué dans le fichier d'exemple de FlexPaperviewer

Un screen soot du bouzin sur tinaderp (qui avance)

Notes

[1] source: php-codeur Upload de fichiers

[2] Je progresse en javascript hein?

Commentaires

1. Le mardi, juillet 31 2012, 19:09 par geek

Salut,

Merci pour le tutoriel ^^ ... mais j'ai une question, je suis en train de construire mon site en local, j'ai installé swftools mais le problème c'est que la commande (exec) ne me fait pas la conversion, quand je la lance à partir de mon terminal, elle fonctionne mais à partir de la commande (exec) ça ne donne rien, est ce qu'il faut la configurer avec xampp en sachant que je suis sous ubuntu 12.04.

Merci.

2. Le mercredi, août 1 2012, 14:38 par gnieark

Hello,

non, normalement pour la commande exec, il n'y a rien à faire.
Une piste pour ton débuggage:
avec exec, c'est l'user apache qui va lancer la commande (www-data pour un lamp, pour un xamp je ne sais pas), vérifie qu'il ait bien le droit d'écrire dans le dossier que tu lui donnes. n'hésite pas à faire un:

su -c "pdf2swf fichier.pdf -o fichier.swf" www-data

pour avoir le retour de la commande utilisée par www-data.

Blog du grouik