199

我生成普通链接,例如:<a href="/path/to/image"><img src="/path/to/image" /></a>在网络应用程序中。

当我单击链接时,它会在新页面中显示图片。如果要保存图片,则需要右键单击它并选择“另存为”

我不希望这种行为,我希望在单击链接时弹出一个下载框,这可能仅使用 html 或 javascript 吗?如何?

如果不是,我想我将不得不编写一个 download.php 脚本并将其以文件名作为参数调用到 href 中......?

4

10 回答 10

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

它尚未完全支持caniuse,但您可以使用modernizr在非核心检测下)来检查浏览器的支持。

于 2013-04-30T14:15:03.263 回答
63

为图像或 html 创建下载链接的最简单方法是设置下载属性,但此解决方案仅适用于现代浏览器。

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

“myimage”是要下载的文件名。扩展将自动添加 这里的示例

于 2013-01-28T17:12:52.973 回答
48
<a href="download.php?file=path/<?=$row['file_name']?>">Download</a>

下载.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');

}
?>
于 2011-08-30T02:29:13.140 回答
12

如果您使用 HTML5,您可以将属性“下载”添加到您的链接。

<a href="/test.pdf" download>

http://www.w3schools.com/tags/att_a_download.asp

于 2016-01-20T11:42:24.787 回答
11

不,不是。您将需要服务器上的某些内容来发送 Content-Disposition 标头以将文件设置为附件而不是内联。不过,您可以使用简单的 Apache 配置来做到这一点。

我找到了一个使用 mod_rewrite 的示例,尽管我知道有一种更简单的方法。

于 2010-03-09T10:15:27.477 回答
8

试试这个...

<a href="/path/to/image" download>
    <img src="/path/to/image" />
 </a>
于 2015-07-31T11:19:20.617 回答
6

HTML 下载属性指定当用户单击超链接时将下载目标。

仅当设置了 href 属性时才使用此属性。

该属性的值将是下载文件的名称。对允许值没有限制,浏览器会自动检测正确的文件扩展名并将其添加到文件中(.img、.pdf、.txt、.html 等)。

示例代码:

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

输出

下载图片 >>

html5下载或chrome

下载图片 >>

于 2019-03-06T12:52:08.533 回答
4

你不能用纯 html/javascript 做到这一点。这是因为您与网络服务器有单独的连接以检索单独的文件(图像),并且普通的网络服务器将提供设置了内容标题的文件,以便读取内容类型的浏览器将决定可以在内部处理该类型。

强制浏览器不在内部处理文件的方法是更改​​标题(最好是内容配置或内容类型),以便浏览器不会尝试在内部处理文件。您可以通过在网络服务器上编写脚本来动态设置标头(即download.php)或通过配置网络服务器为您要下载的文件返回不同的标头来做到这一点。您可以在网络服务器上针对每个目录执行此操作,这样您无需编写任何 php 或 javascript 即可逃脱 - 只需将所有下载图像放在一个位置即可。

于 2010-03-09T10:18:11.517 回答
3

使用 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>
于 2016-06-02T13:08:03.883 回答
2

使用图片点击下载图片!

我做了这个简单的代码!:)

<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>
于 2016-06-02T10:51:28.247 回答