-1
votes

Forcer un téléchargement de fichier via HTML

J'essaie de déclencher un téléchargement en fournissant un nom de fichier, mais au lieu de télécharger, il s'ouvre dans l'onglet. Voici mon code que j'utilise. J'utilise également le navigateur Chrome.

<!DOCTYPE html> 
<html> 
   <body> 
      <p> 
         <a href="someFile.png" download="ID"> 
         <button type="button">Download</button> 
         </a> 
   </body> 
</html>

javascript html css href anchor

1 commentaires

button imbriqué dans a code HTML n'est pas valide pour commencer.

3 Réponses :

1
votes

Cela devrait fonctionner

<a href="someFile.png" download>
    <button type="button">Download</button>
</a>

Je pense que vous avez un problème avec votre navigateur, essayez de changer de navigateur.

En outre, je vous suggère d'aller dans les paramètres de Chrome et de faire défiler les paramètres avancés. Dans la section Téléchargements, cliquez sur clear vos options d'ouverture automatique. Et activez Ask where to save each file before downloading .

2 commentaires

Même cela ne fonctionne pas. J'ai également essayé avec Edge, mais cela me donne la possibilité d'ouvrir et d'annuler, de ne pas enregistrer.

@Deepesh Sharma Je vous suggère d'aller dans les paramètres de Chrome et de faire défiler les paramètres avancés. Dans la section Téléchargements, cliquez sur clear vos options d'ouverture automatique. Et activez Ask where to save each file before downloading .

1
votes

Vous pouvez d'abord créer un élément d'ancrage, puis vous pouvez télécharger votre fichier. Suivez l'extrait de code.

var a = document.createElement('a');
a.href = 'file_path';  // file path for the blob object.
a.download = 'file_name.png';  // set file name
a.click();

1 commentaires

Ouverture dans un nouvel onglet avec ceci

0
votes

Chrome a désapprouvé le téléchargement d'origine croisée voir les dépréciations de chrome-65 , vous devez mettre votre image sur la même origine, puis cela fonctionnera.

Voici l'exemple javascript fonctionnel mais votre image doit être sur la même origine.

<!DOCTYPE html> 
<html> 
   <body> 
      <p> 
         <button id="download_button" type="button">Download</button>
      </p>
   </body> 
</html>

const btn = document.querySelector('#download_button');

btn.onclick = function() {
  const link = document.createElement("a");
      link.setAttribute("href", "https://homepages.cae.wisc.edu/~ece533/images/airplane.png");
      link.setAttribute("download", "airplane.png");
      document.body.appendChild(link);
      link.click();
      document.body.removeChild(link);
}

0 commentaires