Discussion :

[Zebulon777]

Bonjour à tous,

Pour mes graphiques, j'utilise la toolbox :

Code javascript :

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
var P_Toolbox = {									// Cartouche en haut à droite
	show: true,
	padding: [5, 25, 0, 0],	// [haut, droit, bas, gauche]
	itemSize: 17,
	itemGap: 10,
	showTitle: true,		
	feature: {
		restore: {
			show: true,
			title: 'Rechargement'
		},
		magicType: {
			type: ['line', 'bar'],
			title: {
				line: 'Ligne',
				bar: 'Histo.'
			}
		},
	saveAsImage: {title:'Sauvegarde'}
	}
};

Est-ce qu'il existe un moyen de donner la possibilité à l'utilisateur de choisir où enregistrer les images ?

Merci d'avance.

[NoSmoking]

Bonjour,
c'est le navigateur qui permet de gérer cela dans le paramétrage et en aucun cas JavaScript n'a accès à la gestion des fichiers chez un client.

[Zebulon777]

Oui, oui, je sais bien cela, mais en php, il n'y aurait pas un moyen ?
Ajouter une fonction qui appel ce qu'il faut en php ?

On trouve plein de sites qui permettent de télécharger un fichier où l'utilisateur le désire.

Ps : Désolé, je me suis peut-être trompé de section, en fait, non ?

[ABCIWEB]

Essayes avec l'attribut download html5, par contre ce n'est pas supporté par IE<13, safari<11 et opera<13.

[Zebulon777]

Merci.
Mais j'ai peur que les limitations HTML5 posent trop de problèmes.
Il y a beaucoup de navigateurs différents et je ne suis pas certains qu'ils acceptent tous le HTML5.
Pfff... c'est chiant.

Sur le net, on trouve plein de sites qui proposent ce genre de chose, mais impossible de trouver comment ils ont fait ou alors, je cherche surement mal

Une autre solution, siouplé ?

[Watilin]

Sur le net, on trouve plein de sites qui proposent ce genre de chose

Peux-tu donner quelques exemples ?

[Zebulon777]

Par ex. : DcTrad : http://www.dctrad.fr/viewtopic.php?f...298586#p298586 -> en cliquant sur l'image, vous arrivez là : http://dl.dctrad.fr/index.php/s/5AdeI7x4xAQc8tq et en cliquant sur le nom du fichier ça donne ça :


C'est exactement ça que je cherche à faire.

[Watilin]

Ça consiste en l’ajout d’un en-tête HTTP Content-Disposition, donc première contrainte : il faut que le fichier soit envoyé par un serveur, ça ne fonctionne pas avec des fichiers générés côté client (et il me semble que c’est le cas avec Echarts).
Et ça dépend aussi en partie de la configuration du navigateur, donc ce n’est pas complètement contrôlable.

Une astuce un peu au pif, et qui demanderait un peu de boulot, serait de modifier Echarts pour qu’il génère ses images avec Blob (si ce n’est pas déjà le cas), et d’ajouter un type MIME qui n’existe pas, pour que le navigateur affiche la boîte de dialogue pour les fichiers de type inconnu, qui est souvent (mais pas garanti !) la fenêtre que tu as montrée.

[Zebulon777]

Oulala, ça dépasse totalement mes compétences

Si ça ne t'embête pas, est-ce que tu peux jeter un coup d'oeil à ce sujet : https://www.developpez.net/forums/d1.../#post10488366

C'est le même genre de souci, sauf que là, le fichier est en PDF et bien créé.

Merci d'avance.

[ABCIWEB]

Une solution qui fonctionnerait sans utiliser l'attribut html5 download serait de mettre un lien vers un fichier php qui forcerait le downlaod. Ce n'est pas de l'ajax, c'est un lien direct de type <a href="<?= 'download.php?img=mon-image.jpg' ?>"><img src="mon-image.jpg" alt=""></a>
Et donc le fichier "download.php" récupère la variable GET "img" et propose le téléchargement de l'image correspondante. Attention de blinder ton code php en vérifiant le nom du fichier proposé en téléchargement ainsi que de définir le dossier autorisé, sinon c'est une faille de sécurité majeure car en modifiant le nom du fichier - en changeant simplement la valeur de la variable GET - quelqu'un pourrait télécharger n'importe quel fichier de ton serveur. Assures-toi en particulier que le nom du fichier ne comporte pas de '/' qui permet de naviguer dans les répertoires. On utilise souvent un regex pour vérifier que le nom du fichier n'est constitué que de caractères alphanumériques plus les caractères '-', '_', et '.'

[Zebulon777]

Merci de ta réponse, mais j'ai besoin d'aide, car ce que j'ai fait ne fonctionne pas.

Il faudrait que j'arrive à appeler la fonction "DownloadFile" à partir de la fonction "SaveAsPdf", mais je dois avoir du mal à me remettre du weekend, car je je trouve pas pourquoi ça ne fonctionne pas.

Code javascript :

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
 
// Enregistrement au format PDF
function saveAsPdf(){
 
	var WRep = window.confirm("Confirmation de l'exportation en PDF ?");
 
	if (WRep)
		{
			var NbDoc = 0;
			var NomPDF = "Export";
			var Ext = ".PDF";
			var FicPDF = "";
 
			var doc = new jsPDF();
 
			var pdfDocWidth  = doc.internal.pageSize.width;
			var pdfDocHeight = doc.internal.pageSize.height;
 
			var xMarginGraph = 5;
			var yMarginGraph = 10;
 
			var yPos = 0;
 
/*-------------------------------------------------------------------------------------------------------------------*/
			canvas = document.querySelector('#lfpo_hg canvas');
			canvasImg = canvas.toDataURL('image/png', 1.0);
 
			graphWidth  = pdfDocWidth - 2 * xMarginGraph;
			graphHeight = graphWidth * canvas.height / canvas.width;
 
			doc.addImage(canvasImg, 'PNG', xMarginGraph, (yPos + yMarginGraph), graphWidth, graphHeight);
 
			yPos += (yMarginGraph + graphHeight);
/*-------------------------------------------------------------------------------------------------------------------*/
			canvas = document.querySelector('#lfpb_hg canvas');
			canvasImg = canvas.toDataURL('image/png', 1.0);
 
			graphWidth  = pdfDocWidth - 2 * xMarginGraph;
			graphHeight = graphWidth * canvas.height / canvas.width;
 
			doc.addImage(canvasImg, 'PNG', xMarginGraph, (yPos + yMarginGraph), graphWidth, graphHeight);
 
			yPos += (yMarginGraph + graphHeight);
/*-------------------------------------------------------------------------------------------------------------------*/
			canvas = document.querySelector('#lfpb_hg canvas');
			canvasImg = canvas.toDataURL('image/png', 1.0);
 
			graphWidth  = pdfDocWidth - 2 * xMarginGraph;
			graphHeight = graphWidth * canvas.height / canvas.width;
 
			doc.addImage(canvasImg, 'PNG', xMarginGraph, (yPos + yMarginGraph), graphWidth, graphHeight);
 
			yPos += (yMarginGraph + graphHeight);
/*-------------------------------------------------------------------------------------------------------------------*/
 
			FicPDF = NomPDF + Ext
			doc.save(FicPDF);
 
//            $.ajax({
//                url:"./scripts/PHP/EnregistrerSous.php?fichier="+FicPDF,
//                type:'POST',
//                data:
//                {
//                    myFunction:'downloadFile',
//					param: FicPDF,
//				},
//                success : function(result)
//				{
//                     
//                    var answer = "<?php require('./scripts/PHP/EnregistrerSous.php');?>";
//                    alert(answer);
//                    alert('ok');
//                },
//                error: function(result)
//				{
//                    alert('error');
//                     
//                },
//            });
 
var resultat = $.get("./scripts/PHP/EnregistrerSous.php?download_file=".concat(FicPDF));
		alert('FIN');
 
 
 
 
/*-------------------------------------------------------------------------------------------------------------------*/
 
		alert("Fichier PDF '" + FicPDF + "' créé dans le répertoire 'Téléchargements' de votre ordinateur.");
	}
}

Code php :

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
 
<?php
 
ignore_user_abort(true);
set_time_limit(0); // disable the time limit for this script
 
$path = ""; // change the path to fit your websites document structure
 
$dl_file = preg_replace("([^\w\s\d\-_~,;:\[\]\(\).]|[\.]{2,})", '', $_GET['download_file']); // simple file name validation
$dl_file = filter_var($dl_file, FILTER_SANITIZE_URL); // Remove (more) invalid characters
$fullPath = $path.$dl_file;
 
if ($fd = fopen ($fullPath, "r")) {
    $fsize = filesize($fullPath);
    $path_parts = pathinfo($fullPath);
    $ext = strtolower($path_parts["extension"]);
    switch ($ext) {
        case "pdf":
        header("Content-type: application/pdf");
        header("Content-Disposition: attachment; filename=\"".$path_parts["basename"]."\""); // use 'attachment' to force a file download
        break;
        // add more headers for other content types here
        default;
        header("Content-type: application/octet-stream");
        header("Content-Disposition: filename=\"".$path_parts["basename"]."\"");
        break;
    }
    header("Content-length: $fsize");
    header("Cache-control: private"); //use this to open files directly
    while(!feof($fd)) {
        $buffer = fread($fd, 2048);
        echo $buffer;
    }
}
fclose ($fd);
exit;
?>

[Watilin]

Je viens de tester, apparemment le navigateur ignore l’en-tête Content-Disposition quand la requête est faite via ajax. Il faut simuler un clic sur un lien de la manière suivante :

1. créer un lien avec createElement ;
2. mettre l’adresse du fichier à télécharger sur son attribut href ;
3. (optionnel parce que tous les navigateurs n’en tiennent pas compte) ajouter le nom du fichier comme attribut download ;
4. ajouter le lien au <body> ;
5. appeler sa méthode click ;
6. (optionnel mais plus propre) le supprimer avec remove.

Code :

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

1
2
3
4
5
6
let $a = document.createElement("a");
$a.href = "./scripts/PHP/EnregistrerSous.php?download_file=".concat(FicPDF);
$a.download = FicPDF;
document.body.append($a);
$a.click();
$a.remove();

Si tu veux plus d’infos, j’ai fait une intervention sur un autre fil où je montre un exemple d’utilisation de Blob.

[Zebulon777]

Mais je dois quand même garder le code PHP ?

Bon, je teste ça dés que possible.

Merci beaucoup.

[Zebulon777]

Pour clore la discussion : voir l'instruction download ou le script Filesaver.js et éventuellement ce sujet : https://www.developpez.net/forums/d1.../#post10517357