Télécharger le fichier à l’aide de Javascript/jQuery

Question

J’ai une exigence très similaire indiquée ici

J’ai besoin de commencer téléchargement manuellement quand``

Mais je ne peux pas utiliser `` méthode, car il remplace le contenu actuel de la page avec le fichier que vous essayez de télécharger.

Au lieu de cela, je veux ouvrir le téléchargement dans la nouvelle fenêtre/onglet. Comment est-ce possible ?

Answer 1

L'utilisation de cette fonction:

var downloadURL = function downloadURL(url) {
    var hiddenIFrameID = 'hiddenDownloader',
        iframe = document.getElementById(hiddenIFrameID);
    if (iframe === null) {
        iframe = document.createElement('iframe');
        iframe.id = hiddenIFrameID;
        iframe.style.display = 'none';
        document.body.appendChild(iframe);
    }
    iframe.src = url;
};

La façon dont il fonctionne, c'est par la création d'une iframe invisible (une seule fois) qui peut ensuite être utilisé pour télécharger des fichiers à partir d'internet.

Pour forcer le navigateur à télécharger un fichier qu'il serait capable de rendu (comme le HTML ou des fichiers de texte), vous devez le serveur pour configurer le fichier de Type MIME pour une absurde de la valeur, comme application/x-please-download-me ou alternativement application/octet-stream, qui est utilisé pour des données binaires arbitraires.

Si vous ne souhaitez ouvrir dans un nouvel onglet, la seule façon de le faire c'est pour l'utilisateur à cliquer sur un lien avec ses target attribut _blank.

En jQuery:

$('a#someID').attr({target: '_blank', 
                    href  : 'http://localhost/directory/file.pdf'});

Chaque fois que le lien est cliqué, il va télécharger le fichier dans un nouvel onglet/fenêtre.

Answer 2

J'ai créé le Fichier jQuery Télécharger le plugin (Démo) (GitHub), qui pourrait également aider avec votre situation. Il fonctionne assez similaire avec un iframe, mais a quelques fonctionnalités intéressantes que j'ai trouvé très pratique:

• Très facile à installer avec de jolis visuels (jQuery Dialogue de l'INTERFACE utilisateur, mais pas nécessaire), tout est testé trop

• L'utilisateur ne quitte jamais la même page, ils ont lancé un téléchargement de fichier. Cette fonctionnalité est devenue cruciale pour les applications web modernes

• successCallback et failCallback fonctions vous permettent d'être explicite sur ce que l'utilisateur voit dans les deux cas

• En collaboration avec jQuery UI un développeur peut facilement montrer une modale indiquant à l'utilisateur que le téléchargement d'un fichier est en cours, dissoudre le modal après le début du téléchargement ou même informer l'utilisateur d'une manière amicale qu'une erreur s'est produite. Voir la Démo pour un exemple de cette. Espérons que cela aide quelqu'un!

Voici un cas d'utilisation simple démonstration de l'utilisation du plugin source avec des promesses. La page de démonstration comprend de nombreux autres, "mieux UX' exemples.

$.fileDownload('some/file.pdf')
    .done(function () { alert('File download a success!'); })
    .fail(function () { alert('File download failed!'); });

Answer 3

function downloadURI(uri, name) 
{
    var link = document.createElement("a");
    link.download = name;
    link.href = uri;
    link.click();
}

Answer 4

Si vous utilisez déjà jQuery, vous pourriez prendre adventage de celui-ci pour produire un extrait de petit
Une version de jQuery de réponse Andrew :

Answer 5

En utilisant la balise d’ancrage et PHP, il peut être fait, vérifiez cette réponse

Appel JQuery Ajax pour télécharger le fichier PDF

Je vérifie pour la taille du fichier parce que si vous chargez des pdf de CDN cloudfront, vous n’obtiendrez pas la taille du document qui force le document à télécharger sous 0 Ko, afin d’éviter ceci que je suis vérifiant cette condition