Utilisation de la bibliothèque jsPDF

Version imprimable

11/03/2016, 20h25
thermo_nono

Utilisation de la bibliothèque jsPDF

bonjour,
je cherche à réaliser un formulaire dans lequel j'entrerais les dimensions d'un smartphone et qui me sortirait directement un plan au format PDF conçu à partir des mesures reçues et qui ressemblerait à ça (c'est le plan pour iphone 4/4s) :
http://holoclock.craym.eu/holoclock01.pdf

Je pensais utiliser la bibliothèque "jsPDF" mais je me pose quelques questions..
- existe t-il une bibliothèque plus indiquée que jsPDF pour faire ça ?
- cette bibliothèque permet-elle de tracer des lignes et des pointillés ?
- est-il possible de sortir un plan au millimètre près tracé par le biais de jsPDF ?
- ensuite, me sera t-il possible d'ajouter des options (insertion, redimensionnement et faire pivoter image) pour décorer la réalisation ( dans ce style : http://holoclock.craym.eu/holoclock-pacman01.pdf )
- y aurait-il une âme charitable susceptible de m'assister dans cette tâche ? (je suis une brèle en javaScript)

merci d'avance pour votre aide, étant donné mon niveau en js, vos réponses me seront précieuses.
12/03/2016, 19h16
mathieu

cette bibliothèque a l'air d'être très bien pour faire des fichiers PDF
comme à faire un fichier PDF tout simple avec quels effets et mets un message sur le forum si tu as besoin d'aide

la documentation est bien détaillée là :
http://mrrio.github.io/jsPDF/doc/symbols/jsPDF.html

merci pour ta réponse, malheureusement je n'arrive même pas a afficher une ligne :
dans ma page web, dans la section "head", j'ai mis la ligne :

Code:

<script src = "jsPDF-1.2.60/jspdf.js" type = "text/javascript"></script>

puis, plus loin sur ma page j'ai mis :

Code:

1
2
3
4
5
6
7
<script>	
	jsPDF.API.mymethod = function(a,b,c,d){
		this.lines([[a,b],[c,d]],50,20,[1.0,1.0])
	}
	var pdfdoc = new jsPDF()    // par défaut (portrait mm a4)
	pdfdoc.mymethod("100","0","0","50") // <- !!!!!!
</script>

mais ça ne fait rien... j'ai ensuite recopié un autre bout de code trouvé sur leur site :

Code:

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
	<script>	
		var doc = new jsPDF();
 
		doc.line(20, 20, 60, 20); // horizontal line
 
		doc.setLineWidth(0.5);
		doc.line(20, 25, 60, 25);
 
		doc.setLineWidth(1);
		doc.line(20, 30, 60, 30);
 
		doc.setLineWidth(1.5);
		doc.line(20, 35, 60, 35);
 
		doc.setDrawColor(255,0,0); // draw red lines
 
		doc.setLineWidth(0.1);
		doc.line(100, 20, 100, 60); // vertical line
 
		doc.setLineWidth(0.5);
		doc.line(105, 20, 105, 60);
 
		doc.setLineWidth(1);
		doc.line(110, 20, 110, 60);
 
		doc.setLineWidth(1.5);
		doc.line(115, 20, 115, 60);
	</script>

mais le résultat est le même.

J'aurais quand même bien apprécié un exemple avec le code d'une page HTML complète.

je vais d'ailleurs mettre tout mon code (désolé c'est brouillon, mais je fais des tests)

Code:

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
<?php session_start(); ?>
<!DOCTYPE HTML>
<html>
  <head>
	<meta charset="utf-8" />
	<link rel="stylesheet" href="clk01.css" />
    <meta name="description" content="horloge holographique pour smartphone">
    <meta name="keywords" content="holoclock, horloge holographique, hologramme diy, affichage holographique de l'heure, effet optique, diy">
    <meta name="author" content="Thermo_nono">
	<script src = "jsPDF-1.2.60/jspdf.js" type = "text/javascript"></script>
	<title>holoclock drawer</title>
  </head>
 
  <body>
 
	<!-- Menu -->
	<hr />
	<div id="conteneur">
		<br />
		<span class="element">&nbsp;<a href="index.php">Holoclock</a>&nbsp;&nbsp;</span>
		<span class="element">&nbsp;<a href="presentation.php">Presentation</a>&nbsp;&nbsp;</span>
		<span class="element">&nbsp;<a href="tutodiy.php">Tuto DIY</a>&nbsp;&nbsp;</span>
		<span class="element">&nbsp;<a href="downloads.php">Telechargements</a>&nbsp;</span>
		<br /><br />
	</div>
	<hr /><br />
	<div>
		<h1>Holoclock Drawer</h1>
	</div>
	<br />
	<div id="chapt">
		formulaire : <br />
		<form action="drawer.php" method="$_GET">
			<table><tr>
			<td rowspan="2"><label for="hphone"><img src="phoneM1.png" /></label></td>
			<td><label for="hphone">Saisissez la hauteur du téléphone en millimetres : </label></td>
			</tr><tr>
			<td><input name="hphone" id="hphone" type="number"></td>
			</tr><tr>
			<td rowspan="2"><label for="lphone"><img src="phoneM2.png" /></label></td>
			<td><label for="lphone">Saisissez la largeur du téléphone en millimetres : </label></td>
			</tr><tr>
			<td><input name="lphone" id="lphone" type="number"></td>
			</tr><tr>
			<td rowspan="2"><label for="ephone"><img src="phone02.png" /></label></td>
			<td><label for="ephone">Saisissez l'épaisseur du téléphone en millimetres : </label></td>
			</tr><tr>
			<td><input name="ephone" id="ephone" type="number"></td>
			</tr><tr>
			<td rowspan="2"><label for="hscr"><img src="phoneM3.png" /></label></td>
			<td><label for="hscr">Saisissez la hauteur de l'écran en millimetres : </label></td>
			</tr><tr>
			<td><input name="hscr" id="hscr" type="number"></td>
			</tr><tr>
			<td rowspan="2"><label for="lscr"><img src="phoneM4.png" /></label></td>
			<td><label for="lscr">Saisissez la largeur de l'écran en millimetres : </label></td>
			</tr><tr>
			<td><input name="lscr" id="lscr" type="number"></td>
			</tr><tr>
			<td rowspan="2"><label for="hphs"><img src="phoneM5.png" /></label></td>
			<td><label for="hphs">Saisissez la mesure entre le haut du téléphone et le haut de l'écran : </label> : </td>
			</tr><tr>
			<td><input name="hphs" id="hphs" type="number"></td>
			</tr></table>
			<INPUT TYPE="submit">
		</form>
	</div>
 
	<script>	
		jsPDF.API.mymethod = function(a,b,c,d){
			this.lines([[a,b],[c,d]],50,20,[1.0,1.0])
		}
		var pdfdoc = new jsPDF()    // par défaut (portrait mm a4)
		pdfdoc.mymethod("100","0","0","50") // <- !!!!!!
	</script>	
 
	</div>
  </body>
</html>

merci d'avance de m'aiguiller... en réalité j'ai juste besoin d'un exemple qui trace une ligne... mais je voudrais tout le code HTML... à partir de là j'embête plus personne ! ^^

13/03/2016, 09h00
NoSmoking

Bonjour,

Citation:

<script src = "jsPDF-1.2.60/jspdf.js" type = "text/javascript"></script>

à vérifier que le fichier JS est bien chargé, regarde la console (F12)

Citation:

J'aurais quand même bien apprécié un exemple avec le code d'une page HTML complète.

pour les tests il y a http://mrrio.github.io/jsPDF/, mais visiblement tu connais.

Citation:
Envoyé par thermo_nono
puis, plus loin sur ma page j'ai mis :
Code:

1 2 3 4 5 6 7 <script> jsPDF.API.mymethod = function(a,b,c,d){ this.lines([[a,b],[c,d]],50,20,[1.0,1.0]) } var pdfdoc = new jsPDF() // par défaut (portrait mm a4) pdfdoc.mymethod("100","0","0","50") // <- !!!!!! </script>
il manque juste la ligne de génération du fichier à la fin, par exemple ça :

Code:

pdfdoc.output("dataurl");

13/03/2016, 11h52
thermo_nono

Merci à tous les deux pour votre aide.

@NoSmoking : oui, j'ai vérifié et la bibliothèque s'ouvre bien.
@Mathieu : Merci. En effet c'est cette ligne qui faisait défaut. ça y est ! je vais pouvoir poursuivre mon projet.. ^^

Je suis trop trop content de ne plus être bloqué par ce script... merci encore même si je me répète. ^^