Barre chargement pendant compilation PDF

**chouchouilloux** · 01/04/2013, 23h50

Bonjour,

Pour un site je créé en fin de formulaire un fichier PDF qui s'affiche a l'écran et qui est également envoyé par mail.

Je souhaiterai que pendant la compilation du PDF (2 pages minimum) une barre de chargement ou message s'affiche.

En cherchant un peu j'ai compris que je pouvais utiliser le .ready mais si j'ai pas trop mal compris celui ci ne s’exécute que seulement une fois que toute la page est chargée donc pas d’intérêt dans mon cas sauf erreur de ma part.

Je pense que je dois pouvoir me tourner vers la bibliothèque jquery mais ne comprend pas trop comment cela fonctionne.

Merci d'avance

**Exia_** · 01/04/2013, 23h56

Bonsoir,

tu ne pourra pas le faire en PHP pur, car quand tu cliquera sur Générer le PDF qui sera soit un bouton submit d'un formulaire ou un lien quelconque une page blanche sera afficher jusqu'à que le serveur envoi la réponse en entier.

Donc tu va devoir passer par du Javascript qui enverra les informations de ton formulaire avec de l'Ajax (Javascript qui te permet de faire de l'asynchrone) ou autre technologie Asynchrone pour lancé le script PHP qui te générera ton fichier PDF pour ensuite l'envoyer en réponse à ton Ajax et ensuite le traiter.

**chouchouilloux** · 02/04/2013, 23h22

Bonjour, merci pour ton aide je vais tester cela demain.

Petite question, Exia a un lien avec la filiale du CESI ou pas ?

A plus

**Exia_** · 02/04/2013, 23h48

Non aucun lien avec l'école.

**chouchouilloux** · 03/04/2013, 23h34

Bon j'ai réussi a faire un petit truc avec du CSS mais le problème c'est que mon image censé être dynamique a plutôt tendance a laguer (ça lag en geek LOL)

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
	<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
	<title>JQuery Validation Engine</title>
</head>
<body>
	<div>
		<img src='multimedia/images/engrenage2.gif' style='visibility:visible' id='load'  name='load' />
	</div>
	<div style='visibility:hidden' id='boucle'  name='boucle' >
		&nbsp;
		<?php
			/* exemple 1 */
 
			for ($i = 1; $i <= 1000000; $i++) {
				echo $i;
			}
		?>
	</div>
	<SCRIPT LANGUAGE="JavaScript">
		document.getElementById('load').style.visibility="hidden";
		document.getElementById('boucle').style.visibility="visible";
	</SCRIPT>
</body>
</html>

**gototog** · 04/04/2013, 11h59

elle sert a quoi cette boucle php?

**chouchouilloux** · 04/04/2013, 12h06

C'est juste pour un test, avant de l'intégrer dans mon traitement définitif.

Cette boucle qui dure quelques secondes permet de simuler un traitement long coté serveur.

L'objectif étant dans le but final de mettre mon loading durant la création de mon PDF et de l'envoi de celui ci par mail ainsi que l'affichage a l'écran.

**chouchouilloux** · 06/04/2013, 00h23

Bon j'ai réussi avec un petit bout de code trouvé sur internet.

Le soucis c'est que si je fais référence au fichier PHP qui traite ma requête, pas de problème, par contre si je cherche a valider mon devis PHP, rien ne se passe.

Ci joint mon code :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
 
<?php
if(isset($_POST['envoyer'])) { ?>
	<a href="javascript:loadingdevis();">Test</a>
	<!-- ====================== TEST LOADING ====================== -->
	<div class="devisloadvisibleyes" id="loaddevis">
		<img src="multimedia/images/engrenage2.gif">
	</div>
	<!-- ====================== TEST LOADING ====================== -->
	<div id="affichagedevis">
<?php
	include('include/devistopdf.php');
?>

Cela m'affiche bien mon fichier PDF.

Si je fais le code suivant rien ne se passe

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
 
<?php
	// include('testreponse2.php');
 
	// Traitement du formulaire et création du PDF
	// get the HTML
+ tout le traitement PDF
?>

Si je décommente "include('testreponse2.php');" ma boucle se déroule bien et j'ai mon loading qui reste pendant quelque seconde mais pas d'affichage du PDF.

Je vais m'arracher les cheveux !!!!

**MinDBuSteR** · 07/04/2013, 03h59

Je penses que Exia93 t'avais apporté une bonne piste, il faudrait te tourner du côté du AJAX.

En gros, on appuie sur "Générer PDF", tu met sur le OnSubmit de ton bouton une fonction JS du type generer_pdf(). Celle ci vas afficher ta barre de chargement, pendant ce temps là grâce à ton appel AJAX tu exécutes ton script PHP, et une fois celui ci terminer tu enlèves la barre ou fais même apparaitre une erreur si celui c'est mal déroulé.

**chouchouilloux** · 09/04/2013, 00h03

Bon je crois que je vais avoir besoin d'aide.

J'ai cherché un peu pour l'ajax et voici mon code.

pdf1.php => ma page principale

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-
strict.dtd">
<?php session_start(); ?>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
	<title>Exemple DEVIS PDF</title>
	<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
	<meta http-equiv="Content-language" content="fr-FR" />
	<link rel="stylesheet" media="screen" type="text/css" href="css/styles.css" /> <!-- permet d'aller chercher les données de la page css -->
	<script type="text/javascript" charset="utf-8" src="js/ajax.js" ></script>
</head>
<body>
<div id="page">
<!-- En tête de la page -->
<?php  
echo "Session : ".session_id();
?>
<div id="header">
	<div id="logo">
		<div class="logoheadcenter"></div>
	</div>
	<div id="menuhor" class="menuhor"></div>
</div>
<div id="menu" class="bg"></div>	<!-- Partie gauche de la page -->
<div id="contenu" class="center">
	<p>
		<a href="javascript:loadingdevis();">Générer le PDF !</a>
	</p>
	<div class="devisloadvisibleno" id="loading" border="2px solid yellow">
		<img src="images/engrenage2.gif"></img>
	</div>
	<div id="pdf" class="devisloadvisibleno" width="800px">
		<?php include('pdf3.php'); ?>
	</div>
</div>		<!-- Central de la page -->
<div id="foot" style="padding-top:10px; padding-bottom:10px;"> </div>
</div>									<!-- Pied de page -->

pdf2.php => Ma mise en page du fichier PDF

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
 
<page backtop="5mm" backbottom="5mm" backleft="5mm" backright="5mm" footer="date;heure;page" style="font-size: 12pt">
<?php
session_start();
 
// Récupération des variables
$erreur				= 0;
 
 
// PARTIE CLIENT
$clinom				= "MON NOM";
$cliprenom			= "prenom";
$cliadresse			= "adresse";
$clicodepostal		= "codepostal";
$cliville			= "ville";
$clitel				= "tel";
$clifax				= "fax";
$cliemail			= "email1";
 
// PARTIE MANIFESTATION
$manifadressemanif	= "adresse";
$manifdatemanif		= "date";
//substr("abcdef", 2, -1);  // retourne "cde" 2545-02-25
$manifdatemanif		= "05/10/2015";
 
// PARTIE DIVERS
$diversvaisselle	= "OUI";
$diversserveur		= "NON";
$diverscommentaires	= "commentaires";
 
// PARTIE CONNAISSANCE
$connaissance		= "GOOGLE";
 
// PARTIE MANIF ET DETAILMANIF
?>
<!-- =================================================================================================================================== -->
<?php
echo "
<table style=\"width: 100%; text-align: center;\">
	<tr>
		<td colspan=\"2\" style=\"border: 1;  text-align: center\">
			
		</td>
	</tr>
	<tr>
		<td colspan=\"2\" style=\"text-align: center\"><b><i><br />Ceci est une demande de devis en provenance du site Internet.<br /><br /></i></b></td>
	</tr>
	<tr>
		<td colspan=\"2\" style=\"text-align: center\"><b><u>CLIENT</u></b></td>
	</tr>
	<tr>
		<td style=\"width: 175px;  text-align: left\">Client :</td>
		<td style=\"width: 375px;  text-align: left\">$cliprenom $clinom</td>
	</tr>
	<tr>
		<td style=\"width: 175px;  text-align: left; vertical-align: top;\">Adresse :</td>
		<td style=\"width: 375px;  text-align: left\">$cliadresse - $clicodepostal $cliville</td>
	</tr>
	<tr>
		<td style=\"width: 175px;  text-align: left\">Tél - Fax :</td>
		<td style=\"width: 375px;  text-align: left\">$clitel - $clifax</td>
	</tr>
	<tr>
		<td style=\"width: 175px;  text-align: left\">Email :</td>
		<td style=\"width: 375px;  text-align: left\">$cliemail</td>
	</tr>
	<tr>
		<td colspan=\"2\" ><hr /></td>
	</tr>
	<tr>
		<td colspan=\"2\" style=\"text-align: center\"><b><u>MANIFESTATION</u></b></td>
	</tr>
	<tr>
		<td style=\"width: 175px;  text-align: left\">Date de la manif :</td>
		<td style=\"width: 375px;  text-align: left\">$manifdatemanif</td>
	</tr>
	<tr>
		<td style=\"width: 175px;  text-align: left\">Lieu de la manif :</td>
		<td style=\"width: 375px;  text-align: left\">$manifadressemanif</td>
	</tr>
	<tr>
		<td colspan=\"2\" ><br /></td>
	</tr>
	<tr>
		<td style=\"width: 175px;  text-align: left; vertical-align: top;\">Choix prestation(s) :</td>
		<td style=\"width: 375px;  text-align: left\">
			<table style=\"width: 100%; \">
				<tr>
					<td style=\"width: 66px;  text-align: center;\">Enf (- 5)</td>
					<td style=\"width: 67px;  text-align: center;\">Enf (- 11)</td>
					<td style=\"width: 67px;  text-align: center;\">Adulte</td>
					<td style=\"width: 280px;  text-align: left;\">Prestation</td>
				</tr>
				<tr>
					<td style=\"border-top: 0; width: 66px;  text-align: center; vertical-align: top;\">0</td>
					<td style=\"border-top: 0; width: 67px;  text-align: center; vertical-align: top;\">7</td>
					<td style=\"border-top: 0; width: 67px;  text-align: center; vertical-align: top;\">32</td>
					<td style=\"border-top: 0; width: 280px;  text-align: left;\"> => BUFFET N°1</td>
				</tr>
				<tr>
					<td style=\"border-top: 0; width: 66px;  text-align: center; vertical-align: top;\">0</td>
					<td style=\"border-top: 0; width: 67px;  text-align: center; vertical-align: top;\">7</td>
					<td style=\"border-top: 0; width: 67px;  text-align: center; vertical-align: top;\">32</td>
					<td style=\"border-top: 0; width: 280px;  text-align: left;\"> => BUFFET N°3</td>
				</tr>
			</table>
		</td>
	</tr>
	<tr>
		<td colspan=\"2\" ><br /></td>
	</tr>
	<tr>
		<td style=\"width: 175px;  text-align: left\">Location de vaisselle :</td>
		<td style=\"width: 375px;  text-align: left\">$diversvaisselle</td>
	</tr>
	<tr>
		<td style=\"width: 175px;  text-align: left\">Serveur :</td>
		<td style=\"width: 375px;  text-align: left\">$diversserveur</td>
	</tr>
	<tr>
		<td colspan=\"2\" ><hr /></td>
	</tr>
	<tr>
		<td colspan=\"2\" style=\"text-align: center\"><b><u>INFORMATIONS DIVERSES</u></b></td>
	</tr>
	<tr>
		<td style=\"width: 175px;  text-align: left; vertical-align: top;\">Commentaires :</td>
		<td style=\"width: 375px;  text-align: left\">$diverscommentaires</td>
	</tr>
	<tr>
		<td style=\"text-align: left\" colspan=\"2\"><br /></td>
	</tr>
	<tr>
		<td colspan=\"2\" style=\"width: 175px;  text-align: left\">Comment nous avez vous connu : $connaissance</td>
	</tr>
	<tr>
		<td colspan=\"2\" ><hr /></td>
	</tr>
</table>"; ?>
</page>
<page backtop="5mm" backbottom="5mm" backleft="5mm" backright="5mm" footer="date;heure;page" style="font-size: 12pt">
	<?php
	echo "
<table style=\"width: 100%; text-align: center;\">
	<tr>
		<td colspan=\"2\" style=\"text-align: center;\"><b><u>DETAIL PRESTATION(S)</u></b></td>
	</tr>
	<tr>
		<td style=\"width: 175px;  text-align: left\"></td>
		<td style=\"width: 375px;  text-align: left\"></td>
	</tr>
	<tr>
		<td colspan=\"2\" style=\"text-align: center\">
			<table style=\"width: 100%\">
				<tr>
					<td style=\"width: 45%;  text-align: center; vertical-align: top\">
						<b><u>BUFFET N°1</u></b><br />
						<p>SALADE 1 <br />VIANDE 1 <br />FROMAGE <br />DESSERTS</p>
					</td>
					<td style=\"width: 10%;\"></td>
					<td style=\"width: 45%;  text-align: center; vertical-align: top\">
						<b><u>BUFFET N°3</u></b><br />
						<p>SALADE 3 <br />VIANDE 3 <br />FROMAGE <br />DESSERTS</p>
					</td>
				</tr>
			</table>
		</td>
	</tr>
</table>
";
?>
<!-- =================================================================================================================================== -->
</page>

pdf3.php => Affichage de mon PDF à l'écran

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
 
<?php
// session_start();
$session = session_id();
$fichier_out = 'temp_pdf/'.$session.'.pdf';
 
echo "<object data=\"".$fichier_out."\" type=\"application/pdf\" width=\"820px\" height=\"100%\"></object>";
?>

pdf5.php => ma page appelé en Ajax pour création PDF

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
 
<?php
header('Content-Type: text/xml');
echo "<?xml version=\"1.0\"?>\n";
 
session_start();
// Traitement du formulaire et création du PDF
// get the HTML
ob_start();
include('pdf2.php');
$content = ob_get_clean();
$session = session_id();
$fichier_out = 'temp_pdf/'.$session.'.pdf';
 
// convert to PDF
require_once('pdf/html2pdf.class.php');
 
try
{
	$html2pdf = new HTML2PDF('P', 'A4', 'fr');
	$html2pdf->pdf->SetAuthor('Michel Jourdain Traiteur');
	$html2pdf->pdf->SetTitle('Devis site internet');
 
	//$html2pdf->setModeDebug();
	$html2pdf->pdf->SetDisplayMode('fullpage');
	//$html2pdf->pdf->SetProtection(array('print'), 'spipu');
	$html2pdf->writeHTML($content, isset($_GET['vuehtml']));
	// enregistre le document test.PDF dans le répertoire local du serveur.
	$html2pdf->Output($fichier_out, 'F');
	// affiche le document test.PDF dans le navigateur.
	// $html2pdf->Output($fichier_out);
 
}
catch(HTML2PDF_exception $e) {
	echo $e;
	exit;
}
?>

ajax.js => Mon fichier JS

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
 
// ==================== FONCTION LOADING DEVIS ==================== //
function loadingdevis() {
	var xhr=null;
	if (window.XMLHttpRequest) {
		xhr = new XMLHttpRequest();
	}
	else if (window.ActiveXObject) {
		xhr = new ActiveXObject("Microsoft.XMLHTTP");
	}
 
	//on définit l'appel de la fonction au retour serveur
	xhr.onreadystatechange = function() { loadingdevisEnd(xhr); };
	//on affiche le message d'acceuil
	document.getElementById("loading").className="devisloadvisibleyes";
	document.getElementById("pdf").className="devisloadvisibleno";
	//on appelle le fichier reponse.txt
	xhr.open("GET", "pdf5.php", true);
	xhr.send(null);
}
 
function loadingdevisEnd(xhr) {
	if (xhr.readyState==4) {
		var docXML= xhr.responseXML;
		document.getElementById("loading").className="devisloadvisibleno";
		document.getElementById("pdf").className="devisloadvisibleyes";
	}
}
// ==================== FONCTION LOADING DEVIS ==================== //

Quand je lance en debug via la console de firefox, j'ai l'erreur suivante :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
 
--
[22:53:36,809] GET http://localhost/dev_test/AJAX/test2/pdf5.php [HTTP/1.1 200 OK 2860ms]
[22:53:39,628] aucun élément trouvé @ http://localhost/dev_test/AJAX/test2/pdf5.php:2

**MinDBuSteR** · 10/04/2013, 00h24

J'ai regardé rapidement :

- Pour te simplifier avec l'ajax regarde du côté de Jquery. Tu verras comment envoyer des variables à ton script en GET ou POST, parce que sans tu risque d'être rapidement bloqué pour personnaliser tes devis...

- Pourquoi sortir pdf5.php en XML ?

- Si tu veux avoir un meilleur debug, ajoute cet outil indispensable à Firefox : Firebug.

**chouchouilloux** · 11/04/2013, 00h03

edit : Tout d'abord merci de votre aide et piste à suivre. Je vais essayer de trouver quelque chose en francais pour le lien jquery car mes connaissances en anglais sont plus que ............

flou je dirai LOL

Envoyé par MinDBuSteR

- Pour te simplifier avec l'ajax regarde du côté de Jquery. Tu verras comment envoyer des variables à ton script en GET ou POST, parce que sans tu risque d'être rapidement bloqué pour personnaliser tes devis...

==> Petite question, quand vous parlez du GET et POST, c'est dans la fonction jquery ou c'est pour la gestion de mes formulaires devis ? (le fait que j'ai mis en dur les réponses ???)

Envoyé par MinDBuSteR

- Pourquoi sortir pdf5.php en XML ?

==> Parce que j'avais trouvé un code ou pour son test il faisait une boucle PHP pour simuler un temps de latence serveur et en début de code il envoyé un header XML. De plus si je ne l'envoi pas, rien ne se passe, même pas un message d'erreur

Envoyé par MinDBuSteR

- Si tu veux avoir un meilleur debug, ajoute cet outil indispensable à Firefox : Firebug.

==> Ca c'est fait

**MinDBuSteR** · 11/04/2013, 01h34

Quand je parles du GET/POST c'est pour l'envoie de tes variables à ton script lancer par AJAX.

Je penses que tes devis à éditer sont automatisés par client donc en gros :

Ton bouton du style : OnClick="generer_pdf(no_client);" vas appeler ton script AJAX qui va envoyer "no_client" à pdf5.php en GET ou POST au choix.

Je penses que tu peux oublié la sortie en XML. Test indépendamment pdf5.php et ensuite essaie de l'intégrer à ajax.js.

Barre chargement pendant compilation PDF

Langage PHP

Discussions similaires

Partager

Partager