Comment télécharger un fichier à l'aide de JavaScript / jQuery?
Exemple 1: Utilisation de la vanille JS et de la balise
Pour cet exemple, la partie du script serait écrite en JavaScript normal, et une appuye sur le bouton entraînerait le téléchargement de la machine du client le fichier prévu.
Étape 1: Configurez le document HTML
Commencez par créer un nouveau document HTML nommé «Home», puis ajoutez les lignes suivantes à l'intérieur de ce document HTML:
Cliquez sur le bouton ci-dessous pour télécharger le fichier!
Ajout des lignes ci-dessus dans le La balise de l'élément HTML entraînerait le résultat suivant à l'intérieur du navigateur:
À partir des lignes qui ont été ajoutées dans le document HTML, on peut facilement remarquer que le "sur clic" la propriété du bouton a été définie sur la fonction "télécharger un fichier()". Créons cette fonction à l'étape suivante
Étape 2: Partie javascript
Soit dans le étiquette de script ou dans le fichier JavaScript lié, ajoutez les lignes de code suivantes pour ajouter la fonctionnalité au bouton:
Ici, la fenêtre.emplacement.La propriété HREF a été définie sur le chemin du fichier qui doit être téléchargé par la machine du client. Étant donné que seul le nom du fichier a été utilisé comme chemin d'accès au fichier, cela signifie que le fichier est placé dans le même dossier que le document HTML:
Quoi qu'il en soit, cela entraînerait le navigateur à télécharger le fichier.
Étape 3: Essai
À la fin, lancez le document HTML et cliquez sur le bouton et observez que le navigateur commencera instantanément à télécharger le fichier comme:
Car il ressort clairement du gif ci-dessus que toute la page Web fonctionne parfaitement comme prévu.
Exemple 2: Utilisation de jQuery et étiqueter
Pour cet exemple, la partie de script serait écrite en jQuery et un Le lien de balise entraînerait le démarrage du navigateur du téléchargement du fichier prévu.
Étape 1: Configurer le document HTML
Tout comme le premier exemple, créez un nouveau document HTML nommé «Home», puis ajoutez les lignes suivantes à l'intérieur de ce document HTML:
Cliquez sur le bouton ci-dessous pour télécharger le fichier!
Cliquez ici!
Maintenant, dans cet exemple, un Tag avec l'ID «Download» est utilisé à la place d'un bouton. L'exécution de ce document HTML donnera les résultats suivants sur la page Web:
La prochaine étape consiste à ajouter du jQuery pour télécharger le fichier chaque fois que le lien est cliqué.
Étape 2: code jQuery
Dans la balise de script ou dans le fichier de script, ajoutez les lignes suivantes:
$ (document).ready (function ()$ ("# download").cliquez sur (fonction (e)
e.PARVEFAULT ();
fenêtre.emplacement.href = "Demo.docx ";
);
);
Dans les lignes ci-dessus:
- Une fonction est appelée une fois que le document est entièrement prêt
- Dans cette fonction, une vérification constante a été appliquée sur l'élément avec l'ID "télécharger" qui est en fait le étiqueter Et le chèque est d'un événement «click»
- Après cela, accédez simplement à l'emplacement.Attribut HREF au chemin du fichier.
Étape 3: Test
Fixez le document HTML et cliquez sur le lien et observez la réponse du résultat comme ceci:
Le lien cliquable fait que la machine du client télécharge le fichier prévu à l'aide de jQuery
Conclure
Pour utiliser JavaScript ou JQuery pour amener la machine du client à télécharger un fichier spécifique, accédez simplement à l'attribut HREF de la propriété d'emplacement de l'objet Window et définissez-le égal sur le chemin complet du fichier sur le serveur. En utilisant de cette façon, il est facile de créer un bouton qui entraînera le téléchargement du fichier. Et aussi, un lien cliquable pour provoquer le téléchargement du fichier. Quoi qu'il en soit, la procédure a été expliquée à fond dans les exemples ci-dessus.