(HTML) Baixe um arquivo PDF em vez de abri-lo no navegador quando clicado

Eu queria saber como fazer um link de arquivo PDF para download em vez de abri-los no navegador. Como isso é feito em html? (Eu presumo que seja feito via javascript ou algo assim).

Você não pode fazer isso com HTML. É uma solução baseada em servidor. Você deve transmitir o arquivo para que o navegador acione a caixa de diálogo Salvar.

Eu aconselho não fazer isso. A forma como um usuário interage com um PDF deve ser deixada para o usuário.

ATUALIZAÇÃO (2014):

Então ... essa resposta ainda recebe muitos votos negativos. Presumo que parte disso seja que isso foi respondido há 4 anos e, como Sarim aponta, agora existe o atributo HTML 5download que pode lidar com isso.

Eu concordo e acho que a resposta de Sarim é boa (provavelmente deve ser a resposta escolhida se o OP algum dia retornar). No entanto, essa resposta ainda é a maneira confiável de lidar com isso (como a resposta de Yiğit Yener aponta e - estranhamente - as pessoas concordam). Embora o atributo de download tenha ganhado suporte, ainda é irregular:

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

Com html5, agora é possível. Defina um elemento de atributo "download".

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

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

Isso só é possível com a configuração de um cabeçalho de resposta http pelo código do lado do servidor. Nomeadamente;

Content-Disposition: attachment; filename=fname.ext

Você precisa alterar os cabeçalhos http enviados. Dependendo do seu servidor, você pode modificar seu .htaccess da seguinte maneira:

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

você precisará usar um script PHP (ou outra linguagem do lado do servidor para isso)

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

e use o httacces para redirecionar (reescrever) para o arquivo PHP em vez do pdf

Você pode usar

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

Veja este exemplo:

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

Isso vale para ASP.NET. Tenho certeza de que você pode encontrar soluções semelhantes em todas as outras linguagens do servidor. No entanto, até onde sei, não existe uma solução em javascript.

Sem o atributo html5, pode-se fazer isso usando php:

Crie um arquivo php chamado download.php com 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();
}

Agora, se você deseja iniciar automaticamente o download do pdf, escreva este javascript:

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

Se você quiser que isso funcione em um link, use isso ...

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

Quando você deseja baixar diretamente qualquer imagem ou arquivo pdf do navegador, em vez de abri-lo em uma nova guia e, em seguida, em javascript, você deve definir o valor para o atributo de download de criar link 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 uma nova atualização do Chrome, algum evento de tempo não está funcionando. para o seguinte código será usado

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

Anexar filho e remover filho é útil para o Firefox, navegador Internet explorer apenas. No Chrome, ele funcionará sem adicionar e remover filho

A solução que funcionou melhor para mim foi aquela escrita por Nick em seu blog

A ideia básica de sua solução é usar o mod de cabeçalho dos servidores Apache e editar o .htaccess para incluir uma diretiva FileMatch que força todos os arquivos * .pdf a agirem como um fluxo em vez de um anexo. Embora isso não envolva a edição de HTML (de acordo com a pergunta original), não requer nenhuma programação em si.

A primeira razão pela qual eu preferi a abordagem de Nick é porque ela me permitiu defini-la em uma base por pasta, de forma que PDFs em uma pasta ainda pudessem ser abertos no navegador enquanto permitia outras (aquelas que gostaríamos que os usuários editassem e depois carregassem novamente) a ser forçado como downloads.

Também gostaria de acrescentar que existe uma opção com PDFs para postar / enviar formulários preenchíveis por meio de uma API para seus servidores, mas isso leva algum tempo para implementar.

A segunda razão é porque o tempo é uma consideração. Escrever um manipulador de arquivo PHP para forçar a disposição do conteúdo no cabeçalho () também levará menos tempo do que uma API, mas ainda mais do que a abordagem de Nick.

Se você sabe como ligar um mod do Apache e editar o .htaccss, pode fazer isso em cerca de 10 minutos. Requer hospedagem Linux (não Windows). Essa pode não ser a abordagem apropriada para todos os usos, pois requer acesso ao servidor de alto nível para configurar. Portanto, se você disse acesso é provavelmente porque já sabe fazer essas duas coisas. Se não, verifique o blog de Nick para obter mais instruções.

Como a forma html5 (minha resposta anterior) não está disponível em todos os navegadores, aqui está outra forma um pouco hack.

Esta solução requer que você esteja servindo o arquivo pretendido do mesmo domínio OU tenha permissão CORS.

1. Primeiro baixe o conteúdo do arquivo via XMLHttpRequest (Ajax).
2. Em seguida, crie um URI de dados codificando o conteúdo do arquivo em base64 e defina o tipo de mídia como application/octet-stream. O resultado deve ser semelhante a

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

Agora pronto location.href = data. Isso fará com que o navegador baixe o arquivo. Infelizmente, você não pode definir o nome ou a extensão do arquivo dessa forma. Mexer com o tipo de mídia pode render alguma coisa.

Veja os detalhes: https://developer.mozilla.org/en-US/docs/Web/HTTP/data_URIs

Eu precisava fazer isso para arquivos criados com nomes dinâmicos em uma pasta específica e servidos pelo IIS.

Isso funcionou para mim:

• No IIS, vá para essa pasta e clique duas vezes em Cabeçalhos de resposta HTTP.

• Adicione um novo cabeçalho com as seguintes informações:

  Name: content-disposition Value: attachment

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

Se você estiver usando HTML5 (e acho que hoje em dia todo mundo usa isso), existe um atributo chamado download.

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

aqui filenameé opcional, mas se fornecido, levará este nome para o arquivo baixado.

O comportamento deve depender de como o navegador está configurado para lidar com vários tipos de MIME. Nesse caso, o tipo MIME é application / pdf. Se você deseja forçar o navegador a baixar o arquivo, pode tentar forçar um tipo MIME diferente nos arquivos PDF. Eu não recomendo isso, pois deve ser a escolha do usuário o que acontecerá quando eles abrirem um arquivo PDF.

Você pode usar download.js ( https://github.com/rndme/download e http://danml.com/download.html ). Se o arquivo estiver em um URL externo, você deve fazer uma solicitação Ajax, mas se não estiver, você pode usar a função:

download(Path, name, mime)

Leia a documentação para obter mais detalhes no GitHub.

Finalmente descobri ...... criar uma tag âncora dinâmica e clicar nela

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

'Payment.pdf' é apenas para nome personalizado.