link de imagem href download no clique


180

Eu gero links normais como: <a href="https://stackoverflow.com/path/to/image"><img src="/path/to/image" /></a>em um aplicativo da web.

Quando clico no link, ele exibe a imagem em uma nova página. Se você deseja salvar a imagem, clique com o botão direito do mouse nela e selecione "Salvar como"

Eu não quero esse comportamento, gostaria de ter uma caixa de download aparecendo quando clico no link, isso é possível apenas com html ou javascript? Quão?

Se não, acho que teria que escrever um script download.php e chamá-lo no href com o nome do arquivo como parâmetro ...?


Aqui está uma maneira fácil de fazer uso dessa classe PHP: tutorialchip.com/php-download-file-script
ven

Respostas:


239
<a download="custom-filename.jpg" href="/path/to/image" title="ImageName">
    <img alt="ImageName" src="/path/to/image">
</a>

Ainda não é totalmente suportado http://caniuse.com/#feat=download , mas você pode usar o modernizr https://modernizr.com/download/?adownload-setclasses ( em Detecções não essenciais ) para verificar o suporte de o navegador.


2
Obrigado pelo seu comentário, é bom saber. Embora você precisa Modernizr, agora eu usá-lo em todos os meus projetos assim ... Vou aceitar a sua resposta como a nova resposta
Pierre

1
Eu acho que você pode ter entendido errado o papel do Modernizr aqui. Em suma, ele não adiciona funcionalidade que está faltando ... veja esta resposta: stackoverflow.com/questions/18681644/...
bravokiloecho

@GauravManral o que parece ser o problema?
Francisco Costa

1
@GauravManral: O IE não suporta, como mencionado na resposta. Veja o link caniuse fornecido.
Peirix

8
IMPORTANTE : o downloadatributo attributete funciona apenas para URLs da mesma origem . MDN Docs
cespon

59

A maneira mais fácil de criar um link de download para imagem ou html é definir o atributo de download , mas esta solução funciona apenas em navegadores modernos.

<a href="/path/to/image" download="myimage"><img src="/path/to/image" /></a>

"myimage" é um nome de arquivo para download. A extensão será adicionada automaticamente Exemplo aqui


Isso funcionará para o Windows Message Box? Eu tentei, parece que não está funcionando, mas talvez eu tenha feito algo errado ?!
1377

48
<a href="download.php?file=path/<?=$row['file_name']?>">Download</a>

download.php:

<?php

$file = $_GET['file'];

download_file($file);

function download_file( $fullPath ){

  // Must be fresh start
  if( headers_sent() )
    die('Headers Sent');

  // Required for some browsers
  if(ini_get('zlib.output_compression'))
    ini_set('zlib.output_compression', 'Off');

  // File Exists?
  if( file_exists($fullPath) ){

    // Parse Info / Get Extension
    $fsize = filesize($fullPath);
    $path_parts = pathinfo($fullPath);
    $ext = strtolower($path_parts["extension"]);

    // Determine Content Type
    switch ($ext) {
      case "pdf": $ctype="application/pdf"; break;
      case "exe": $ctype="application/octet-stream"; break;
      case "zip": $ctype="application/zip"; break;
      case "doc": $ctype="application/msword"; break;
      case "xls": $ctype="application/vnd.ms-excel"; break;
      case "ppt": $ctype="application/vnd.ms-powerpoint"; break;
      case "gif": $ctype="image/gif"; break;
      case "png": $ctype="image/png"; break;
      case "jpeg":
      case "jpg": $ctype="image/jpg"; break;
      default: $ctype="application/force-download";
    }

    header("Pragma: public"); // required
    header("Expires: 0");
    header("Cache-Control: must-revalidate, post-check=0, pre-check=0");
    header("Cache-Control: private",false); // required for certain browsers
    header("Content-Type: $ctype");
    header("Content-Disposition: attachment; filename=\"".basename($fullPath)."\";" );
    header("Content-Transfer-Encoding: binary");
    header("Content-Length: ".$fsize);
    ob_clean();
    flush();
    readfile( $fullPath );

  } else
    die('File Not Found');

}
?>

17
Há um problema de segurança, deve fechar o tipo de conteúdo "application / force-download"! que pode baixar qualquer coisa, incluindo a fonte PHP do servidor!
22712 CharlesB

3
@CharlesB está certo, isso permitiria que você baixasse qualquer coisa do servidor usando a travessia de diretório: <a href="download.php?file=../dbparams.inc>">Download</a>por exemplo. Mais informações aqui: en.wikipedia.org/wiki/Directory_traversal_attack
OrganicPanda

@ CharlesB: então qual é a maneira mais segura ... exceto a resposta assinalada?
HIRA THAKUR

3
Para contornar o problema de segurança, não use informações de caminho absolutas ou relativas da solicitação; obtenha apenas o nome do arquivo. Desvie o caminho, por exemplo, usando $ file = pathInfo ($ _ GET ['file']] e monte o caminho anexando algum caminho conhecido com $ file ['basename']. Se você precisar fornecer arquivos de várias pastas, use tokens de caminho no seu pedido, que você, em seguida, mapear para o caminho real em sua função de download.
Alexander233

1
Ou crie uma tabela com o relacionamento Id, Token, Path, obtenha o token da URL, verifique o Path no banco de dados e retorne esse arquivo. Isso seria mais seguro. Mas obviamente mais complicado.
Felype

10

Não é não. Você precisará de algo no servidor para enviar um cabeçalho Disposição de Conteúdo para definir o arquivo como um anexo, em vez de estar embutido. Você pode fazer isso com a configuração simples do Apache.

Eu encontrei um exemplo de fazê-lo usando mod_rewrite , embora eu saiba que existe uma maneira mais simples.


6
Ei, você diz: "embora eu saiba que existe uma maneira mais simples" ... qual? ^ _ ^
Pierre

Se eu pudesse encontrar os detalhes, eu os publicaria. Não consigo encontrá-los agora e não tenho tempo para dedicar a uma extensa pesquisa.
Quentin

1
Tudo bem, obrigado pela sua ajuda. Acabei de criar uma página php que gera o download ...
Pierre


7

Tente isso ...

<a href="/path/to/image" download>
    <img src="/path/to/image" />
 </a>

5

Atributo de download HTML para especificar que o destino será baixado quando um usuário clicar no hiperlink.

Este atributo é usado apenas se o atributo href estiver definido.

O valor do atributo será o nome do arquivo baixado. Não há restrições quanto aos valores permitidos, e o navegador detectará automaticamente a extensão de arquivo correta e a adicionará ao arquivo (.img, .pdf, .txt, .html, etc.).

Código de exemplo:

<a href="https://www.w3schools.com/images/myw3schoolsimage.jpg"> Download Image >></a>

HTML5:

<a href="https://www.w3schools.com/images/myw3schoolsimage.jpg" download> Download Image >></a>

Saída :

Faça o download da imagem >>

Download ou cromo em HTML5

Faça o download da imagem >>


1
Ei, obrigado pela resposta. Algumas pessoas já propuseram isso, mas acho que ainda não é totalmente suportado. Por outro lado, seu link de download não está funcionando para mim no Chrome mais recente
Pierre

Hey Pierre, tente este <a href=" w3schools.com/images/myw3schoolsimage.jpg "download> Baixar Imagem >> </a> graças
Rizo

4

Você não pode fazê-lo com puro html / javascript. Isso ocorre porque você tem uma conexão separada com o servidor da web para recuperar um arquivo separado (a imagem) e um servidor da web normal servirá o arquivo com os cabeçalhos de conteúdo definidos, para que o navegador que lê o tipo de conteúdo decida que o tipo pode ser tratado internamente.

A maneira de forçar o navegador a não manipular o arquivo internamente é alterar os cabeçalhos (disposição do conteúdo preferencialmente ou tipo de conteúdo) para que o navegador não tente manipular o arquivo internamente. Você pode fazer isso escrevendo um script no servidor da web que define dinamicamente os cabeçalhos (por exemplo, download.php) ou configurando o servidor da web para retornar cabeçalhos diferentes para o arquivo que você deseja baixar. Você pode fazer isso por diretório no servidor da web, o que permitiria fugir sem escrever nenhum php ou javascript - basta ter todas as imagens de download nesse local.


1
Não. Mentir sobre o tipo de conteúdo não é a única maneira de conseguir isso. Consulte o cabeçalho de resposta HTTP da disposição do conteúdo.
Quentin

4

Código simples para download de imagem com um clique de imagem usando php

<html>
<head>
    <title> Download-Button </title>
</head>
<body>
    <p> Click the image ! You can download! </p>
    <?php
    $image =  basename("http://localhost/sc/img/logo.png"); // you can here put the image path dynamically 
    //echo $image;
    ?>
    <a download="<?php echo $image; ?>" href="http://localhost/sc/img/logo.png" title="Logo title">
        <img alt="logo" src="http://localhost/sc/img/logo.png">
    </a>
</body>

2

Download da imagem usando o clique da imagem!

Eu fiz esse código simples! :)

<html>
<head>
<title> Download-Button </title>
</head>
<body>
<p> Click the image ! You can download! </p>
<a download="logo.png" href="http://localhost/folder/img/logo.png" title="Logo title">
<img alt="logo" src="http://localhost/folder/img/logo.png">
</a>
</body>
</html>
Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.