HTML下载标签

Question

基本问题是：我有一个指向图像文件的链接。当我单击链接时，期望的行为是获取下载对话框，以允许我启动关联的图像编辑器。这不会发生，因为浏览器呈现了图像文件。

是否有任何HTML技巧可以强制浏览器在用户单击链接时提供下载对话框？

非常感谢您的任何帮助或指针。

- Gearoid Murphy

Answer 1

两种方法：

1. 在锚点标签的href属性中使用Data URIs：

   <a href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAAPCAYAAADphp8SAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAAOnAAADpwBB5RT3QAAABZ0RVh0Q3JlYXRpb24gVGltZQAwMi8yNS8xMapAVMwAAAAcdEVYdFNvZnR3YXJlAEFkb2JlIEZpcmV3b3JrcyBDUzVxteM2AAABjklEQVQ4jZWTwWoTURSGv5lMp1OmxUIUXISCCbW06daNtGuh7uMbCHaeoOBSzBMEN92LXXThohVtoAshOyuKJQkaXWRjKi7aBjPT9v6uEsbpTGp/OHDPvf/5zjmLa0niCo0zWMODA2BZVqZTEkG1RdwhoLaxMKqTBJKWJO1JOpN0Iek8EQqeNxVXLP8jqS7pniXpe+1V9+yw058ft19yoqHKJb+9XikcOcDcYadvj4Mki+P68q1/F5hz4s1qGwsABNUWszMOD+7nWS75THk5wshw0DzhbeM3x/3zJG/CiWdBtTU6r63kuZ2f5NnmD8LI4Lk2TyoFHq7mefnm56XJMldaLE5T2+oSRgaAQWR4sdWlXJpO9WeCbvi5EWSoQWSYmkwvyQRdGOG5/z57rn0JfiWo8emY4FFhBPNcm/VKgQ/Nk1S/k3oLvN4/Ym31Jk8f38FzbQah4fPXU3be/8oEGSCXfBhEhu16j+16L6tXXKENfFwq+u3/caepXPLbwDsk3ZK0G/tr14lTSTuSin8BUMr8td343bwAAAAASUVORK5CYII=">Download</a>

2. 在一些特定的浏览器中，如Google Chrome和Firefox，你可以这样做：

   <a download="image.jpg" href="http://www.domain.com/image.jpg">Download</a>

- Italo Borssatto

Answer 2

仅使用HTML无法实现，但您可以通过使用服务器端语言（如PHP）修改标头来强制下载文件。

// grab the requested file's name
$file_name = $_GET['file'];

// make sure it's a file before doing anything!
if(is_file($file_name))
{

    /*
        Do any processing you'd like here:
        1.  Increment a counter
        2.  Do something with the DB
        3.  Check user permissions
        4.  Anything you want!
    */

    // required for IE
    if(ini_get('zlib.output_compression')) { ini_set('zlib.output_compression', 'Off'); }

    // get the file mime type using the file extension
    switch(strtolower(substr(strrchr($file_name,'.'),1)))
    {
        case 'pdf': $mime = 'application/pdf'; break;
        case 'zip': $mime = 'application/zip'; break;
        case 'jpeg':
        case 'jpg': $mime = 'image/jpg'; break;
        default: $mime = 'application/force-download';
    }
    header('Pragma: public');   // required
    header('Expires: 0');       // no cache
    header('Cache-Control: must-revalidate, post-check=0, pre-check=0');
    header('Last-Modified: '.gmdate ('D, d M Y H:i:s', filemtime ($file_name)).' GMT');
    header('Cache-Control: private',false);
    header('Content-Type: '.$mime);
    header('Content-Disposition: attachment; filename="'.basename($file_name).'"');
    header('Content-Transfer-Encoding: binary');
    header('Content-Length: '.filesize($file_name));    // provide file size
    header('Connection: close');
    readfile($file_name);       // push it out
    exit();

}

- Scott

---

但这是否意味着用户只需导航到此页面即会被强制下载图像？ - Gearoid Murphy

现在你需要做的是将你的图片链接更改为指向这个php文件，通过$_GET['file']发送图片。然后，是的，文件将被强制下载。 - Scott

这是MediaWiki，因此我不确定我能否轻松地从MediaWiki扩展的上下文中操作HTTP标头。 - Gearoid Murphy

现在您需要做的是将此代码保存为PHP文件并将其放置在图像文件夹中，然后要强制下载图片，您可以链接到该文件，例如：http://www.example.com/images/downloadimage.php?file_name=myimage.jpg而不是链接到http://www.example.com/images/myimage.jpg，无需修改MediaWiki代码。 - Scott

Answer 3

如果您想显示下载对话框，您需要将特殊标头添加到您的图像中

在PHP中，它将是：

header('Content-Description: File Transfer');
header('Content-Type: application/octet-stream');
header('Content-Disposition: attachment; filename=image.jpg');
header('Content-Transfer-Encoding: binary');

- Adam Lukaszczyk

Answer 4

另一个解决方案是将以下内容添加到包含图像的文件夹中的htaccess文件中： AddType application/octet-stream .jpg

- Scott

---

那难道不会强制所有的jpg文件都被视为原始二进制吗？我希望能够在浏览器中呈现这些图像... - Gearoid Murphy

是的，这将强制下载所有图像。使用此解决方案，您可以将要强制下载的图像放入单独的文件夹中，并仅对该文件夹应用此代码。如果由于任何原因无法执行此操作，则PHP或类似的解决方案是唯一的选择。 - Scott