href标签下载属性-如何使其强制下载外部托管的图片? [英] href tag download attribute - how to make it force download of externally hosted image?

问题描述

我想创建一个< a href 链接，单击该链接可强制浏览器打开另存为"对话框.在所有现代浏览器中，HTML5 download 属性的使用都应具有这种行为.

I want to make a <a href link which, when clicked, forces your browser to open a "Save As" dialogue. The use of the HTML5 download attribute should have this behavior on all modern browsers.

当目标是外部托管的图像文件时，此操作无效.< a href 链接将导航至该图片，而不是下载该图片.(使用托管在Imgur和Tumblr上的图像进行了测试)

When the target is an externally hosted image file, this does not work. The <a href link will navigate to the image instead of downloading it. (Tested using images hosted on Imgur and Tumblr)

<a href="https://i.stack.imgur.com/440u9.png" download>
  <img src="https://i.stack.imgur.com/440u9.png" width="200"/>
</a>

例如，如果图像是在您的服务器上本地托管的，则

类似的HTML代码是有效的有效

Similar HTML code does work if the image is hosted locally on your server, for example

<a href="440u9.png" download>
  <img src="440u9.png" width="200"/>
</a>

另一个示例-这将在 W3Schools Tryit编辑器中起作用，但是如果您将HTML复制到另一个沙箱(如JSFiddle)，则将无法使用

Another example - this will work in the W3Schools Tryit Editor, but will not work if you copy the HTML to another sandbox like JSFiddle

<a href="https://www.w3schools.com/images/myw3schoolsimage.jpg" download>
  <img src="https://www.w3schools.com/images/myw3schoolsimage.jpg" width="104" height="142">
</a>

探究的可能原因:

• 不良图片网址:否，该网址很好，您可以在浏览器中将其作为普通图片打开
• 出于安全考虑，不能以这种方式使用https:链接:否，如果URL指向相同的域，则使用 https:的URL很好，这是在W3Schools Tryit中测试的编辑器
• 服务器端重定向:可以将 http://... 链接重定向到 https://... 导致失败的原因，但是 https://... 链接也不起作用
• 特定主机是否抑制服务器上的下载属性?那有可能吗?download属性应该确定只能控制客户端浏览器的操作吗?

• Bad image URL: no, the URL is good, you can open the URL as a plain image in your browser
• Links with https: can't be used this way due to security: no, a URL with https: is good if the URL points to the same domain, tested in W3Schools Tryit Editor
• Server-side redirect: an http://... link can be redirected to https://... so maybe that could be a cause of failure, but the https://... link also does not work
• Suppression of download attribute on server by specific hosts? is that even possible? the download attribute should control only client-side browser action surely?

有任何解决方法吗?我已经尝试过在这里和此处，但是所有这些最终都涉及到浏览器操作，类似于单击 href 链接.

Any workarounds? I have tried Javascript download methods discussed here and here but these all eventually involved a browser action similar to clicking on an href link.

出色对下载链接的深入讨论，包括服务器上PHP中的 application/force-download 设置

Excellent in-depth discussion of download links including application/force-download setting in PHP on the server

与StackOverflow相关的问题:强制使用外部下载URL (答案似乎不正确)

Related StackOverflow question: Force external download url (answer seems to be incorrect)

推荐答案

得出的答案是，无法可以按照我的要求进行.现代浏览器将跨域下载作为一项安全功能来阻止.

Turns out the answer is that this cannot be done in the way I was asking. Modern browsers prevent cross-domain downloads as a security feature.

请参阅:将Firefox和Chrome下载图像置于具体名称

Force<下载/>下载图片而不是打开图片的网址链接

如果下载必须与原始文件字节相同，那么我现在可以找到的唯一解决方案是:

If the download must be byte-identical to the original file, the only solutions I can find right now are:

1. 服务器必须首先使用httpClient请求获取目标资源，将其保存到服务器本地磁盘上，然后提供< a href ='tmp.jpg'下载> 链接到已保存文件的URI.或者，某些服务器框架能够创建一个模拟文件访问的字节流，在这种情况下，资源可以缓存到内存中，而不是保存到磁盘中.

1. The server must first use an httpClient request to get the target resource, save it to disk locally on the server, then provide an <a href='tmp.jpg' download> link with the URI being that saved file. Or, some server frameworks are able to create a bytestream simulating file access, in which case the resource could be cached to memory instead of saving to disk.

缺点:数据成本等于文件大小的两倍(一次一次，一次一次)，往返延迟，服务器内存/文件系统的使用.提供页面之前，可能每个带有下载链接的文件都必须本地存储在服务器上 (或者可以使用websocket异步完成，在用户单击下载链接后提供文件，但有延迟).对于大文件或高使用率的服务器，这些都是严重的缺点.

Drawbacks: data cost equal to twice the filesize (once in, once out), roundtrip delay, use of server memory/filesystem. Probably every possible file with a download link has to be stored locally on the server before the page is served (or maybe it can be done asynchronously using websockets, serving the file after the user clicks the download link, but with a delay). For large files or high usage servers these are serious drawbacks.

在新选项卡中打开目标URL，然后让客户端切换到该选项卡，然后手动右键单击并另存为...

Open the target URL in a new tab, and let the client switch to that tab, and manually right-click and Save As...

缺点:这正是我们要避免的事情！

Drawbacks: this is exactly what we are trying to avoid!

我仍然想知道是否存在一些黑客手段，例如提供本地URL并让服务器将对该特定资源的请求重定向到外部站点.

I'm still wondering if there is some hack for this, like giving a local URL and having the server redirect a request for that particular resource to the external site.

这篇关于href标签下载属性-如何使其强制下载外部托管的图片?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！