Html href图片链接下载点击
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/2408146/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
href image link download on click
提问by Pierre
I generate normal links like: <a href="/path/to/image"><img src="/path/to/image" /></a>in a web app.
我生成普通链接，例如：<a href="/path/to/image"><img src="/path/to/image" /></a>在网络应用程序中。
When I click on the link, it displays the picture in a new page. If you want to save the picture, then you need to right click on it and select "save as"
当我单击链接时，它会在新页面中显示图片。如果要保存图片，则需要右键单击它并选择“另存为”
I don't want this behaviour, I would like to have a download box popping out when I click on the link, is that possible just with html or javascript? How?
我不想要这种行为，我希望当我点击链接时弹出一个下载框，这是否可能只使用 html 或 javascript？如何？
If not I guess I would have to write a download.php script and call it into the href with the file name as parameter...?
如果不是，我想我将不得不编写一个 download.php 脚本并将其调用到以文件名作为参数的 href 中...？
回答by Francisco Costa
<a download="custom-filename.jpg" href="/path/to/image" title="ImageName">
<img alt="ImageName" src="/path/to/image">
</a>
It's not yet fully supported http://caniuse.com/#feat=download, but you can use with modernizr https://modernizr.com/download/?adownload-setclasses(under Non-core detects) to check the support of the browser.
它尚未完全支持http://caniuse.com/#feat=download，但您可以使用 Modernizr https://modernizr.com/download/?adownload-setclasses（在非核心检测下）来检查对浏览器。
回答by Aleksey Saatchi
The easiest way of creating download link for image or html is setting download attribute, but this solution works in modern browsers only.
为图像或 html 创建下载链接的最简单方法是设置下载属性，但此解决方案仅适用于现代浏览器。
<a href="/path/to/image" download="myimage"><img src="/path/to/image" /></a>
"myimage" is a name of file to download. Extension will be added automatically Example here
“myimage”是要下载的文件名。扩展将自动添加 示例here
回答by amir
<a href="download.php?file=path/<?=$row['file_name']?>">Download</a>
download.php:
下载.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');
}
?>
回答by Quentin
No, it isn't. You will need something on the server to send a Content-Disposition header to set the file as an attachment instead of being inline. You could do this with plain Apache configuration though.
不，不是。您将需要服务器上的某些内容来发送 Content-Disposition 标头以将文件设置为附件而不是内联。不过，您可以使用普通的 Apache 配置来做到这一点。
I've found an example of doing it using mod_rewrite, although I know there is a simpler way.
我找到了一个使用 mod_rewrite 的例子，虽然我知道有一种更简单的方法。
回答by Jijo Paulose
If you are Using HTML5 you can add the attribute 'download' to your links.
如果您使用 HTML5，您可以将“下载”属性添加到您的链接中。
<a href="/test.pdf" download>
回答by edCoder
Try this...
尝试这个...
<a href="/path/to/image" download>
<img src="/path/to/image" />
</a>
回答by Rizo
HTML download attribute to specify that the target will be downloaded when a user clicks on the hyperlink.
HTML 下载属性，用于指定当用户单击超链接时将下载目标。
This attribute is only used if the href attribute is set.
此属性仅在设置了 href 属性时使用。
The value of the attribute will be the name of the downloaded file. There are no restrictions on allowed values, and the browser will automatically detect the correct file extension and add it to the file (.img, .pdf, .txt, .html, etc.).
该属性的值将是下载文件的名称。对允许值没有限制，浏览器会自动检测正确的文件扩展名并将其添加到文件中（.img、.pdf、.txt、.html 等）。
Example code:
示例代码：
<a href="https://www.w3schools.com/images/myw3schoolsimage.jpg"> Download Image >></a>
HTML5:
HTML5：
<a href="https://www.w3schools.com/images/myw3schoolsimage.jpg" download> Download Image >></a>
Output:
输出：
Html5 download or chrome
Html5 下载或 chrome
回答by Sashtha Manik
Simple Code for image download with an image clicking using php
使用 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>
回答by Colin Pickard
You can't do it with pure html/javascript. This is because you have a seperate connection to the webserver to retrieve a separate file (the image) and a normal webserver will serve the file with content headers set so that the browser reading the content type will decide that the type can be handled internally.
你不能用纯 html/javascript 来做。这是因为你有一个单独的连接到网络服务器来检索一个单独的文件（图像），一个普通的网络服务器将提供带有内容标题设置的文件，以便浏览器读取内容类型将决定该类型可以在内部处理。
The way to force the browser not to handle the file internally is to change the headers (content-disposition prefereably, or content-type) so the browser will not try to handle the file internally. You can either do this by writing a script on the webserver that dynamically sets the headers (i.e. download.php) or by configuring the webserver to return different headers for the file you want to download. You can do this on a per-directory basis on the webserver, which would allow you to get away without writing any php or javascript - simply have all your download images in that one location.
强制浏览器不在内部处理文件的方法是更改标题（最好是内容处理或内容类型），这样浏览器就不会尝试在内部处理文件。您可以通过在网络服务器上编写一个动态设置标题的脚本（即download.php）或通过配置网络服务器为您要下载的文件返回不同的标题来完成此操作。您可以在网络服务器上的每个目录的基础上执行此操作，这将使您无需编写任何 php 或 javascript 就可以逃脱 - 只需将所有下载图像放在一个位置即可。
回答by Sashtha Manik
Image download with using image clicking!
使用图片点击下载图片！
I did this simple code!:)
我做了这个简单的代码！:)
<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>
