(HTML) Téléchargez un fichier PDF au lieu de l'ouvrir dans le navigateur lorsque vous cliquez dessus

Je me demandais comment rendre un lien de fichier PDF téléchargeable au lieu de les ouvrir dans le navigateur? Comment cela se fait-il en html? (Je suppose que c'est fait via javascript ou quelque chose).

Vous ne pouvez pas faire cela avec HTML. C'est une solution basée sur un serveur. Vous devez diffuser le fichier pour que le navigateur déclenche la boîte de dialogue d'enregistrement.

Je conseillerais de ne pas faire cela. La façon dont un utilisateur interagit avec un PDF doit être laissée à l'utilisateur.

MISE À JOUR (2014):

Donc ... cette réponse reçoit encore beaucoup de votes négatifs. Je suppose qu'une partie de cela est que cela a été répondu il y a 4 ans et comme le souligne Sarim, il y a maintenant l' attribut HTML 5download qui peut gérer cela.

Je suis d'accord, et je pense que la réponse de Sarim est bonne (elle devrait probablement être la réponse choisie si le PO revient un jour). Cependant, cette réponse reste le moyen fiable de la gérer (comme le souligne la réponse de Yiğit Yener et - curieusement - les gens sont d'accord). Bien que l'attribut de téléchargement soit pris en charge, il est toujours irrégulier:

http://caniuse.com/#feat=download

Avec html5, c'est désormais possible. Définissez un attr "téléchargement" dans l'élément.

<a href="http://link/to/file" download="FileName">Download it!</a>

Source: http://updates.html5rocks.com/2011/08/Downloading-resources-in-HTML5-a-download

Cela n'est possible qu'en définissant un en-tête de réponse http par le code côté serveur. À savoir;

Content-Disposition: attachment; filename=fname.ext

Vous devez modifier les en-têtes http envoyés. En fonction de votre serveur, vous pouvez modifier votre .htaccess comme suit:

<FilesMatch "\.(?i:pdf)$">
  ForceType application/octet-stream
  Header set Content-Disposition attachment
</FilesMatch>

vous devrez utiliser un script PHP (ou un autre langage côté serveur pour cela)

<?php
// We'll be outputting a PDF
header('Content-type: application/pdf');

// It will be called downloaded.pdf
header('Content-Disposition: attachment; filename="downloaded.pdf"');

// The PDF source is in original.pdf
readfile('original.pdf');
?>

et utilisez httacces pour rediriger (réécrire) vers le fichier PHP au lieu du pdf

Vous pouvez utiliser

Response.AddHeader("Content-disposition", "attachment; filename=" + Name);

Regardez cet exemple:

http://www.codeproject.com/KB/aspnet/textfile.aspx

Cela vaut pour ASP.NET. Je suis sûr que vous pouvez trouver des solutions similaires dans toutes les autres langues côté serveur. Cependant, il n'y a pas de solution javascript à ma connaissance.

Sans attribut html5, on peut y parvenir en utilisant php:

Créez un fichier php nommé download.php avec ce code:

<?php
ob_start();
$file = "yourPDF.pdf"

if (file_exists($file)) 
{
    header('Content-Description: File Transfer');
    header('Content-Type: application/octet-stream');
    header('Content-Disposition: attachment; filename='.basename($file));
    header('Content-Transfer-Encoding: binary');
    header('Expires: 0');
    header('Cache-Control: must-revalidate');
    header('Pragma: public');
    header('Content-Length: ' . filesize($file));
    ob_clean();
    flush();
    readfile($file);
    exit();
}

Maintenant, si vous souhaitez démarrer automatiquement le téléchargement de pdf, écrivez ce javascript:

<script>window.location = "download.php";</script>

Si vous voulez que cela fonctionne sur un lien, utilisez ceci ...

<a href='javascript:window.location = "download.php"'>
    Download it!
</a>

Lorsque vous souhaitez télécharger directement une image ou un fichier pdf à partir du navigateur au lieu de l'ouvrir dans un nouvel onglet, vous devez définir la valeur en javascript pour télécharger l'attribut de création de lien dynamique

    var path= "your file path will be here"; 
    var save = document.createElement('a');  
    save.href = filePath; 
    save.download = "Your file name here"; 
    save.target = '_blank'; 
    var event = document.createEvent('Event');
    event.initEvent('click', true, true); 
    save.dispatchEvent(event);
   (window.URL || window.webkitURL).revokeObjectURL(save.href);

Pour la nouvelle mise à jour de Chrome, un événement temporel ne fonctionne pas. pour que le code suivant soit utilisé

  var path= "your file path will be here"; 
    var save = document.createElement('a');  
    save.href = filePath; 
    save.download = "Your file name here"; 
    save.target = '_blank'; 
    document.body.appendChild(save);
    save.click();
    document.body.removeChild(save);

L'ajout d'un enfant et la suppression d'un enfant sont utiles pour Firefox, navigateur Internet Explorer uniquement. Sur Chrome, cela fonctionnera sans ajouter ni supprimer l'enfant

La solution qui fonctionnait le mieux pour moi était celle rédigée par Nick sur son blog

L'idée de base de sa solution est d'utiliser le mod d'en-tête des serveurs Apache et de modifier le .htaccess pour inclure une directive FileMatch qui force tous les fichiers * .pdf à agir comme un flux au lieu d'une pièce jointe. Bien que cela n'implique pas réellement d'éditer du HTML (selon la question originale), cela ne nécessite aucune programmation en soi.

La première raison pour laquelle j'ai préféré l'approche de Nick est qu'elle m'a permis de le définir par dossier afin que les fichiers PDF dans un dossier puissent toujours être ouverts dans le navigateur tout en permettant à d'autres (ceux que nous aimerions que les utilisateurs modifient puis retéléchargent) d'être forcé en tant que téléchargements.

Je voudrais également ajouter qu'il existe une option avec les PDF pour publier / soumettre des formulaires à remplir via une API à vos serveurs, mais cela prend du temps à mettre en œuvre.

La deuxième raison était que le temps est une considération. L'écriture d'un gestionnaire de fichiers PHP pour forcer la disposition du contenu dans l'en-tête () prendra également moins de temps qu'une API, mais toujours plus longue que l'approche de Nick.

Si vous savez comment activer un mod Apache et modifier le .htaccss, vous pouvez l'obtenir en 10 minutes environ. Il nécessite un hébergement Linux (pas Windows). Cette approche peut ne pas être appropriée pour toutes les utilisations car la configuration nécessite un accès serveur de haut niveau. En tant que tel, si vous avez dit accès, c'est probablement parce que vous savez déjà comment faire ces deux choses. Sinon, consultez le blog de Nick pour plus d'instructions.

Comme la méthode html5 (ma réponse précédente) n'est pas disponible dans tous les navigateurs, voici une autre façon légèrement hack.

Cette solution nécessite que vous diffusiez le fichier prévu à partir du même domaine, OU que vous disposiez de l'autorisation CORS.

1. Téléchargez d'abord le contenu du fichier via XMLHttpRequest (Ajax).
2. Créez ensuite un URI de données en encodant en base64 le contenu du fichier et définissez le type de média sur application/octet-stream. Le résultat devrait ressembler à

data:application/octet-stream;base64,SGVsbG8sIFdvcmxkIQ%3D%3D

Maintenant prêt location.href = data. Cela amènera le navigateur à télécharger le fichier. Malheureusement, vous ne pouvez pas définir le nom ou l'extension du fichier de cette façon. Jouer avec le type de média pourrait donner quelque chose.

Voir les détails: https://developer.mozilla.org/en-US/docs/Web/HTTP/data_URIs

J'avais besoin de le faire pour les fichiers créés avec des noms dynamiques dans un dossier particulier et servis par IIS.

Cela a fonctionné pour moi:

• Dans IIS, accédez à ce dossier et double-cliquez sur En-têtes de réponse HTTP.

• Ajoutez un nouvel en-tête avec les informations suivantes:

  Name: content-disposition Value: attachment

(à partir de: http://forums.iis.net/t/1175103.aspx?add+CustomHeaders+only+for+certain+file+types+ )

Si vous utilisez HTML5 (et je suppose que maintenant, tout le monde l'utilise), il y a un attribut appelé download.

ex. <a href="somepathto.pdf" download="filename">

ici filenameest facultatif, mais s'il est fourni, il prendra ce nom pour le fichier téléchargé.

Le comportement doit dépendre de la configuration du navigateur pour gérer divers types MIME. Dans ce cas, le type MIME est application / pdf. Si vous souhaitez forcer le navigateur à télécharger le fichier, vous pouvez essayer de forcer un type MIME différent sur les fichiers PDF. Je déconseille cela, car les utilisateurs doivent choisir ce qui se passera lorsqu'ils ouvriront un fichier PDF.

Vous pouvez utiliser download.js ( https://github.com/rndme/download et http://danml.com/download.html ). Si le fichier est dans une URL externe, vous devez faire une requête Ajax, mais si ce n'est pas le cas, vous pouvez utiliser la fonction:

download(Path, name, mime)

Lisez leur documentation pour plus de détails dans le GitHub.

Enfin j'ai trouvé ...... créer une balise d'ancrage dynamique et cliquer dessus

<script> 
   $('#myclick').click(function(){
       $('body').append('<a id="link" href="mypdf.pdf" 
        download="Payment.pdf">&nbsp;</a>');
       $('#link')[0].click();
   });
</script>

«Payment.pdf» est uniquement pour le nom personnalisé.