J'ai une exigence très similaire spécifiée ici .
J'ai besoin que le navigateur de l'utilisateur démarre un téléchargement manuellement lorsque $('a#someID').click();
Mais je ne peux pas utiliser la window.href
méthode, car elle remplace le contenu de la page actuelle par le fichier que vous essayez de télécharger.
Au lieu de cela, je souhaite ouvrir le téléchargement dans une nouvelle fenêtre / un nouvel onglet. Comment est-ce possible?
javascript
jquery
download
Mithun Sreedharan
la source
la source
Réponses:
Utilisez un invisible
<iframe>
:Pour forcer le navigateur à télécharger un fichier qu'il serait autrement capable de rendre (tel que des fichiers HTML ou texte), vous devez que le serveur définisse le type MIME du fichier sur une valeur absurde, telle que
application/x-please-download-me
ou alternativementapplication/octet-stream
, qui est utilisée pour les binaires arbitraires Les données.Si vous souhaitez uniquement l'ouvrir dans un nouvel onglet, la seule façon de le faire est que l'utilisateur clique sur un lien avec son
target
attribut défini sur_blank
.Dans jQuery:
Chaque fois que vous cliquez sur ce lien, il télécharge le fichier dans un nouvel onglet / fenêtre.
la source
iframe.style.display = 'none';
cela masquera complètement l'iframe. Votre implémentation actuelle rendra l'iframe invisible, mais l'iframe occupera toujours de l'espace en bas de la page, provoquant un espace blanc supplémentaire.Content-Disposition: attachment; filename="downloaded.pdf"
(vous pouvez bien sûr personnaliser le nom du fichier selon vos besoins).Mise à jour des navigateurs modernes 2019
C'est l'approche que je recommanderais maintenant avec quelques mises en garde:
2012 approche jQuery / iframe / cookie originale
J'ai créé le plugin jQuery File Download ( Demo ) ( GitHub ) qui pourrait également vous aider dans votre situation. Il fonctionne de manière assez similaire avec un iframe mais a quelques fonctionnalités intéressantes que j'ai trouvées assez pratiques:
Très facile à configurer avec de jolis visuels (boîte de dialogue jQuery UI, mais pas obligatoire), tout est également testé
L'utilisateur ne quitte jamais la même page à partir de laquelle il a lancé le téléchargement d'un fichier. Cette fonctionnalité devient cruciale pour les applications Web modernes
Les fonctions successCallback et failCallback vous permettent d'être explicite sur ce que l'utilisateur voit dans l'une ou l'autre situation
En conjonction avec jQuery UI, un développeur peut facilement afficher un modal indiquant à l'utilisateur qu'un téléchargement de fichier est en cours, dissoudre le modal après le début du téléchargement ou même informer l'utilisateur de manière conviviale qu'une erreur s'est produite. Voir la démo pour un exemple de cela. J'espère que cela aide quelqu'un!
Voici une démo de cas d'utilisation simple utilisant la source du plugin avec des promesses. La page de démonstration comprend également de nombreux autres exemples de «meilleure expérience utilisateur».
la source
Vérifiez si votre ou vos navigateurs cibles exécuteront correctement l'extrait ci-dessus:
http://caniuse.com/#feat=download
la source
document.body.appendChild(link)
avant le clic et après le clic que vous pouvez fairelink.remove()
pour éviter de polluer le DOM.link.download = ""
en sorte qu'il conserve son nom de fichier d'origine et éviter d'avoir à en définir un.Je suis surpris que peu de gens connaissent l'attribut de téléchargement d'un élément. Aidez-nous à en parler! Vous pouvez avoir un lien html caché et faire un faux clic dessus. Si le lien html a l'attribut de téléchargement, il télécharge le fichier, pas l'affiche, quoi qu'il arrive. Voici le code. Il téléchargera une image de chat s'il peut la trouver.
Remarque: cela n'est pas pris en charge sur tous les navigateurs: http://www.w3schools.com/tags/att_a_download.asp
la source
mp4
sJe recommande d'utiliser l'
download
attribut pour le téléchargement au lieu de jQuery:Cela téléchargera votre fichier sans l'ouvrir.
la source
Si vous utilisez déjà jQuery, vous pouvez en profiter pour produire un petit extrait.
Une version jQuery de la réponse d'Andrew:
la source
if
déclaration devrait vraiment être:if( $idown && $idown.length > 0 )
Fonctionne sur Chrome, Firefox et IE8 et supérieur.
la source
url
, et non de le télécharger.Exemple simple utilisant un
iframe
Appelez ensuite la fonction où vous le souhaitez:
downloadURL('path/to/my/file');
la source
Cela pourrait être utile si vous n'êtes pas obligé de naviguer sur une autre page. Ceci est une fonction javascript de base, elle peut donc être utilisée dans n'importe quelle plate-forme où le backend est en Javascript
la source
Seulement sept ans plus tard, voici une solution jQuery d'une ligne utilisant un formulaire au lieu d'un iframe ou d'un lien:
Je l'ai testé dans
Si quelqu'un connaît les inconvénients de cette solution, je serais très heureux d'en entendre parler.
Démo complète:
la source
filePath
a une chaîne de requête, car la soumission d'un formulaire écrasera la chaîne de requête dans l'attribut action.var authInput = $("<input>").attr("type", "hidden").attr("name", "myQsKey").val('MyQsValue');
$('<form></form>') .attr('action', filePath) .append($(authInput)) .appendTo('body').submit().remove();
C'est l'équivalent d'un accès:filepath?myQsKey=myValue
window.location
àfilePath
. Jewindow.location = filePath;
ferais juste la même chose.download
attribut de cette façon pour dire au navigateur que vous voulez un téléchargement indépendamment des en-têtes que le serveur renvoie, ce que vous pouvez faire avec una
élément.)Je ne sais pas si la question est tout simplement trop ancienne, mais définir window.location sur une URL de téléchargement fonctionnera, tant que le type de mime de téléchargement est correct (par exemple une archive zip).
la source
J'ai fini par utiliser l'extrait ci-dessous et cela fonctionne dans la plupart des navigateurs, mais pas testé dans IE.
Mise à jour
la source
MouseEvent
ici au lieu de toujours utiliserclick
? Et pourquoi ajouter le lien vers le document avant de cliquer dessus? Peut-être que cela présente des avantages par rapport à l'approche plus simple présentée dans stackoverflow.com/a/23013574/1709587 , mais si c'est le cas, ils ne sont pas expliqués ici.Pour améliorer la réponse d'Imagine Breaker, ceci est pris en charge sur FF et IE:
En d'autres termes, utilisez simplement une
dispatchEvent
fonction au lieu declick()
;la source
Peut-être que votre javascript ouvre une page qui télécharge simplement un fichier, comme lorsque vous faites glisser un lien de téléchargement vers un nouvel onglet:
Avec la fenêtre ouverte, ouvrez une page de téléchargement qui se ferme automatiquement.
la source
Le code le plus complet et le plus efficace (testé) pour le téléchargement de données pour FireFox, Chrome et IE est le suivant. Supposons que les données se trouvent dans le champ texarea , qui a id = 'textarea_area' et filename est le nom du fichier où les données seront téléchargées.
puis il suffit d'appeler
Pour le lancement du téléchargement.
Un tableau pour définir le type MIME correct pour la boîte de dialogue de téléchargement PEUT ÊTRE suivant:
la source
pour moi, cela fonctionne ok testé en chrome v72
la source
J'ai obtenu de bons résultats avec l'utilisation d'une balise FORM car elle fonctionne partout et vous n'avez pas à créer temporairement de fichiers sur le serveur. La méthode fonctionne comme ceci.
Côté client (page HTML) vous créez un formulaire invisible comme celui-ci
Ensuite, vous ajoutez ce code Javascript à votre bouton:
Côté serveur, vous avez le code PHP suivant
download.php
:Vous pouvez même créer des fichiers zip de vos données comme ceci:
La meilleure partie est qu'il ne laisse aucun fichier résiduel sur votre serveur car tout est créé et détruit à la volée!
la source
La réponse soumise par hitesh le 30 décembre 13 fonctionne en fait. Cela nécessite juste un petit ajustement:
Le fichier PHP peut s'appeler lui-même. En d'autres termes, il suffit de créer un fichier nommé saveAs.php, et d'y mettre ce code ...
la source
Ces fonctions sont utilisées dans stacktrace.js :
la source
Je vous suggère d'utiliser l'événement mousedown, qui est appelé AVANT l'événement click. De cette façon, le navigateur gère naturellement l'événement click, ce qui évite toute bizarrerie du code:
la source
Excellente solution de Corbacho, je viens de m'adapter pour me débarrasser du var
la source
Firefox et Chrome testés:
Il s'agit en fait de la solution "chrome" pour Firefox (je ne l'ai pas testée sur d'autres navigateurs, donc laissez des commentaires sur la compilabilité)
la source
Il y a tellement de petites choses qui peuvent se produire lorsque vous essayez de télécharger un fichier. L'incohérence entre les navigateurs seuls est un cauchemar. J'ai fini par utiliser cette superbe petite bibliothèque. https://github.com/rndme/download
Une bonne chose à ce sujet est que sa flexibilité est non seulement pour les URL, mais pour les données côté client que vous souhaitez télécharger.
la source
En utilisant la balise d'ancrage et PHP, cela peut être fait, vérifiez cette réponse
Appel JQuery Ajax pour le téléchargement de fichiers PDF
Je vérifie la taille du fichier parce que si vous chargez le pdf à partir de CDN cloudfront, vous n'obtiendrez pas la taille du document qui force le document à télécharger en 0kb, Pour éviter cela, je vérifie cette condition
la source
Je sais que je suis en retard pour la fête, mais je voudrais partager ma solution qui est la variante de la solution d'Imagine Breaker ci-dessus. J'ai essayé d'utiliser sa solution, car sa solution me semble la plus simple et la plus facile. Mais comme d'autres l'ont dit, cela ne fonctionnait pas pour certains navigateurs, j'ai donc mis des variations dessus en utilisant jquery.
J'espère que cela pourrait aider quelqu'un là-bas.
la source
window.location.href = url
. Le lien que vous créez n'est utilisé pour rien.Remarque: non pris en charge dans tous les navigateurs.
Je cherchais un moyen de télécharger un fichier en utilisant jquery sans avoir à définir l'URL du fichier dans l'attribut href depuis le début.
la source
J'utilise @ solution de rakaloof sans JQuery (parce que vous n'avez pas besoin ici ). Merci pour l'idée! Voici une solution basée sur un formulaire vanillaJS:
la source