(HTML) Descargue un archivo PDF en lugar de abrirlo en el navegador al hacer clic

Me preguntaba cómo hacer que el enlace de un archivo PDF se pueda descargar en lugar de abrirlo en el navegador. ¿Cómo se hace esto en html? (Asumiría que se hace a través de javascript o algo así).

No puede hacer esto con HTML. Es una solución basada en servidor. Debe transmitir el archivo para que el navegador active el cuadro de diálogo para guardar.

Aconsejaría no hacer esto. La forma en que un usuario interactúa con un PDF debe dejarse en manos del usuario.

ACTUALIZACIÓN (2014):

Entonces ... esta respuesta todavía recibe muchos votos negativos. Supongo que parte de eso es que esto se respondió hace 4 años y, como señala Sarim, ahora existe el atributo HTML 5download que puede manejar esto.

Estoy de acuerdo y creo que la respuesta de Sarim es buena (probablemente debería ser la respuesta elegida si el OP regresa). Sin embargo, esta respuesta sigue siendo la forma confiable de manejarlo (como señala la respuesta de Yiğit Yener y, curiosamente, la gente está de acuerdo). Si bien el atributo de descarga ha ganado soporte, sigue siendo irregular:

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

Con html5, ahora es posible. Establezca un elemento de atributo "descargar".

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

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

Esto solo es posible con la configuración de un encabezado de respuesta http mediante el código del lado del servidor. A saber;

Content-Disposition: attachment; filename=fname.ext

Necesita cambiar los encabezados http enviados. Dependiendo de su servidor, puede modificar su .htaccess de la siguiente manera:

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

necesitará usar un script PHP (u otro lenguaje del lado del servidor para esto)

<?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');
?>

y use httacces para redirigir (reescribir) al archivo PHP en lugar del pdf

Puedes usar

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

Mira este ejemplo:

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

Esto se aplica a ASP.NET. Estoy seguro de que puede encontrar soluciones similares en todos los demás idiomas del lado del servidor. Sin embargo, a mi leal saber y entender, no existe una solución de JavaScript.

Sin el atributo html5, uno puede lograr esto usando php:

Cree un archivo php llamado download.php con este código:

<?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();
}

Ahora, si desea comenzar a descargar pdf automáticamente, escriba este javascript:

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

Si quieres que esto funcione en un enlace, usa esto ...

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

Cuando desee descargar directamente cualquier imagen o archivo pdf desde el navegador en lugar de abrirlo en una nueva pestaña, en javascript debe establecer el valor para descargar el atributo de crear un enlace dinámico

    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);

Para la nueva actualización de Chrome, algún evento temporal no funciona. para ese siguiente código se utilizará

  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);

Agregar un hijo y eliminar un hijo es útil solo para Firefox, el navegador Internet Explorer. En Chrome, funcionará sin agregar ni quitar niño.

La solución que mejor me funcionó fue la que escribió Nick en su blog.

La idea básica de su solución es usar el mod de encabezado de los servidores Apache y editar el .htaccess para incluir una directiva FileMatch que obliga a todos los archivos * .pdf a actuar como una secuencia en lugar de un archivo adjunto. Si bien esto en realidad no implica editar HTML (según la pregunta original), no requiere ninguna programación per se.

La primera razón por la que preferí el enfoque de Nick es porque me permitió configurarlo por carpeta para que los PDF en una carpeta aún se pudieran abrir en el navegador y permitir otros (los que nos gustaría que los usuarios editen y luego vuelvan a cargar) para ser forzado como descargas.

También me gustaría agregar que hay una opción con PDF para publicar / enviar formularios rellenables a través de una API a sus servidores, pero eso lleva un tiempo implementarlo.

La segunda razón fue porque el tiempo es una consideración. Escribir un controlador de archivos PHP para forzar la disposición del contenido en el encabezado () también llevará menos tiempo que una API, pero aún más que el enfoque de Nick.

Si sabe cómo activar un mod de Apache y editar el .htaccss, puede obtenerlo en unos 10 minutos. Requiere hosting Linux (no Windows). Este puede no ser un enfoque apropiado para todos los usos, ya que requiere acceso a un servidor de alto nivel para configurarlo. Como tal, si ha dicho acceso probablemente sea porque ya sabe cómo hacer esas dos cosas. Si no es así, consulte el blog de Nick para obtener más instrucciones.

Como la forma html5 (mi respuesta anterior) no está disponible en todos los navegadores, aquí hay otra forma ligeramente pirateada.

Esta solución requiere que esté sirviendo el archivo deseado desde el mismo dominio, O tenga permiso CORS.

1. Primero descargue el contenido del archivo a través de XMLHttpRequest (Ajax).
2. Luego, cree un URI de datos codificando en base64 el contenido del archivo y establezca el tipo de medio en application/octet-stream. El resultado debe verse como

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

Ahora listo location.href = data. Esto hará que el navegador descargue el archivo. Desafortunadamente, no puede establecer el nombre o la extensión del archivo de esta manera. Jugar con el tipo de medios podría dar algo.

Ver detalles: https://developer.mozilla.org/en-US/docs/Web/HTTP/data_URIs

Necesitaba hacer esto para archivos creados con nombres dinámicos en una carpeta en particular y servidos por IIS.

Esto funcionó para mí:

• En IIS, vaya a esa carpeta y haga doble clic en Encabezados de respuesta HTTP.

• Agrega un nuevo encabezado con la siguiente información:

  Name: content-disposition Value: attachment

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

Si está usando HTML5 (y supongo que ahora todos lo usan), hay un atributo llamado download.

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

aquí filenamees opcional, pero si se proporciona, tomará este nombre para el archivo descargado.

El comportamiento debe depender de cómo esté configurado el navegador para manejar varios tipos de MIME. En este caso, el tipo MIME es application / pdf. Si desea forzar al navegador a descargar el archivo, puede intentar forzar un tipo MIME diferente en los archivos PDF. No recomiendo esto, ya que debería ser la elección de los usuarios lo que sucederá cuando abran un archivo PDF.

Puede utilizar download.js ( https://github.com/rndme/download y http://danml.com/download.html ). Si el archivo está en una URL externa, debe realizar una solicitud Ajax, pero si no lo está, puede usar la función:

download(Path, name, mime)

Lea su documentación para obtener más detalles en GitHub.

Finalmente encontré ... crear una etiqueta de ancla dinámica y hacer clic en ella

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

'Payment.pdf' es solo para el nombre personalizado.