Discussion :

[driz764]

Bonjour,
je vais essayer d'être clair pour vous exposer mon problème :p

J'écris du code javascript et j'utilise une API sur laquelle je n'ai pas la main.
Cette API nécessite d'être authentifier via un header Authorization dans la requête http. Je n'ai aucun problème à récupérer les informations au format json.
Mon problème apparaît quand cette API me retourne un fichier binaire que j'aimerais pouvoir télécharger depuis le navigateur.
Je récupère bien le fichier coté javascript (avec un appel xhr) mais je ne sais pas quoi en faire. D’après mes recherches je peux d'ailleurs plus en faire grand chose.
Si j'utilise un href='www.api.whatever.com/file/get/12' je n'ai pas le sentiment de pouvoir transmettre l'authentification.

Des idées ?

Merci de m'avoir lu

[Watilin]

Si si, c'est possible de traiter du binaire avec Ajax : https://developer.mozilla.org/en-US/...ng_Binary_Data

C'est en anglais mais je peux te faire un semblant de traduction si tu le demandes

[driz764]

C'est très bien en anglais, merci. Je teste au plus vite

[driz764]

Alors l'API ne fonctionne pas pour le moment, et pour simplifier le problème au maximum, j'ai placé un fichier pdf sur mon Apache.

Voila mon cas de test :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
 
$scope.getFile = function(id){
  $http({
    method: 'GET',
    url:'/test.pdf',
    responseType:'blob'
}).success(function(data,status,headers,config){
  var blob=new Blob([data],{type:'application/pdf'});
  var url=URL.createObjectURL(blob);
  $('#test').href=url;
}
}

C'est de l'AngularJS, mais cela ne devrait pas être un problème. Il m'est impossible d'ouvrir le fichier ainsi créé.

[Watilin]

Si j'ai bien compris, ton bout de code appelle le fichier, le convertit en une URI data: (createObjectURL) et attache cette URI à un lien, c'est bien ça ? Qu'est-ce qui ne marche pas ?

Est-tu sûr que ton navigateur de test supporte le type 'blob' ? As-tu essayé la méthode du charset 'x-user-defined' ?

[driz764]

Alors mon navigateur est chrome 29. Je pense qu'il gére ca. Je n'ai pas d'erreur JS.
Ce qui ne marche pas, c'est quand je clique sur le lien que j'ai ainsi généré :

Code html :

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

<a href="blob:http%3A//localhost/4ce88f5e-4634-4860-93cc-7771a3048e0c" id="test">Test</a>

Chrome est incapable d'ouvrir le fichier pdf.

As-tu essayé la méthode du charset 'x-user-defined' ?

Je vais chercher des infos, et tester ça.

Merci

[Watilin]

C'est la première fois que je vois une blob: URI.
Si j'en crois la doc ton url devrait être "blob:4ce88f5e-4634-4860-93cc-7771a3048e0c". Il y a peut-être un problème de type de lien (relatif / absolu). J'ai déjà eu des problèmes en modifiant directement des href et je les ai résolus en utilisant setAttribute.

[driz764]

Alors, j'ai modifier à la main avec le Developer Tools de chrome le lien pour mettre :

Code html :

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

<a href="blob:4ce88f5e-4634-4860-93cc-7771a3048e0c" id="test">Test</a>

Quand je clique sur le lien j'ai cette fois une erreur dans la console JS :

Not allowed to load local resource: blob:4ce88f5e-4634-4860-93cc-7771a3048e0c

[EDIT] Ce qui me fait penser qu'il est compliqué (pas possible) de demander au client de télécharger un fichier générer/reçu en JS

[Watilin]

Je pense que c'est plutôt parce que le blob n'existe plus. Il dépend du contexte de la page et son adresse change à chaque fois.

Réessaye comme tout à l'heure mais avec un url.replace("http%3A//localhost/", "") et ça devrait donner quelque chose

[driz764]

Pas mieux. Si j'en crois le message d'erreur, il est plutôt question de droit que contexte ou de chemin d’accès (une fois le bon format utilisé).

Not allowed to load local resource: blob:0b14fae3-01ce-467b-9b9c-a42ef56e0ba7

[driz764]

Code :

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

1
2
3
4
5
6
7
8
9
10
$scope.getFile = function(id){
	var xhr = new XMLHttpRequest();
	xhr.responseType = 'blob';		
	xhr.open('GET', /url/to/file/'+id, true);
	xhr.setRequestHeader('Authorization', 'myToken');
	xhr.onload = function(e) {
		window.location=window.URL.createObjectURL(this.response);
	};
	xhr.send();
};

Tu avais raison visiblement, ça marche comme ça. Je vérifierais le $http de AngularJS ne prend peut être pas en charge les blob.

Finalement pas besoin de changer l'url ainsi formé :

Code :

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

blob:http%3A//localhost/a97bf104-4955-4a30-b8a3-1ee7b7a0ab0f

J'utilise chrome. Il est probable que chaque navigateur est son propre nommage des URL (local ? en cache? je ne sais pas bien à quoi correspond cette url, enfin je sais surtout pas où est stocké le binaire à télécharger).

Par contre le fichier que je telecharge a finalement un nom assez moche a97bf104-4955-4a30-b8a3-1ee7b7a0ab0f.pdf, sais tu si je peux le définir ?

En tout cas, merci de ton aide