Utilisation de la bibliothèque jsPDF

**thermo_nono** · 11/03/2016, 20h25

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.

**mathieu** · 12/03/2016, 19h16

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

**thermo_nono** · 13/03/2016, 00h04

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 :

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

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

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

Code :

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

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 :

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
	<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 :

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
<?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 ! ^^

**NoSmoking** · 13/03/2016, 09h00

Bonjour,

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

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.

**mathieu** · 13/03/2016, 09h53

Envoyé par thermo_nono

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

Code :

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

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 :

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

pdfdoc.output("dataurl");

**thermo_nono** · 13/03/2016, 11h52

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. ^^

Utilisation de la bibliothèque jsPDF

Bibliothèques & Frameworks

Discussions similaires

Partager

Partager