强制<下载 /> 下载图像，而不是打开指向图像的 url 链接

Question

<a download='file' href="https://tinyjpg.com/images/social/website.jpg">
Download
</a>

有没有办法强制下载文件而不是在新窗口中打开文件？现在，如果文件是 URL，如下面的示例所示，则不会下载它，而是会在新窗口中打开。

Answer 1

您可能会因为Firefox和Chrome 65 +仅支持同源下载链接而感到困惑，这可能是一种安全措施。

来源：https://caniuse.com/#feat=download(请参阅"已知问题"选项卡)

Web超文本应用技术工作组 (WHATWG) 建议，在跨源方案中(如示例中所示)，托管相关图像/文件的 Web 服务器需要发送Content-DispositionHTTP 标头，以便download=得到遵守。

来源： https://html.spec.whatwg.org/multipage/links.html#downloading-resources

<小时 />

简而言之：

只有在以下情况下，您才能使用<a download='...'></a>强制下载图像/文件：

1. HTML和图像/文件都托管在同一域中，
   或者
2. html和图像/文件位于不同的域中，外部图像/文件服务器也表示应该通过Content-DispositionHTTP标头下载它。

Answer 2

也许您已经解决了这个问题，但由于您将文件托管在S3上(请参阅Peter B 答案的评论)，您需要向文件 URL 添加签名，并使用 AWS 开发工具包将ResponseContentType设置为binary/octet-stream。我正在使用节点，所以它变成了：

const promises = array.map((item) => {
const promise = s3.getSignedUrlPromise('getObject', {
Bucket: process.env.S3_BUCKET,
Key: key, //filename
Expires: 604800, //time to expire in seconds (optional)
ResponseContentType: 'binary/octet-stream' 
});
return promise;
});
const links = await Promise.all(promises);

我希望这有所帮助。

Answer 3

setTimeout(function() {

url = 'https://media.sproutsocial.com/uploads/2017/02/10x-featured-social-media-image-size.png';
// downloadFile(url); // UNCOMMENT THIS LINE TO MAKE IT WORK

}, 2000);
// Source: http://pixelscommander.com/en/javascript/javascript-file-download-ignore-content-type/
window.downloadFile = function (sUrl) {
//iOS devices do not support downloading. We have to inform user about this.
if (/(iP)/g.test(navigator.userAgent)) {
//alert('Your device does not support files downloading. Please try again in desktop browser.');
window.open(sUrl, '_blank');
return false;
}
//If in Chrome or Safari - download via virtual link click
if (window.downloadFile.isChrome || window.downloadFile.isSafari) {
//Creating new link node.
var link = document.createElement('a');
link.href = sUrl;
link.setAttribute('target','_blank');
if (link.download !== undefined) {
//Set HTML5 download attribute. This will prevent file from opening if supported.
var fileName = sUrl.substring(sUrl.lastIndexOf('/') + 1, sUrl.length);
link.download = fileName;
}
//Dispatching click event.
if (document.createEvent) {
var e = document.createEvent('MouseEvents');
e.initEvent('click', true, true);
link.dispatchEvent(e);
return true;
}
}
// Force file download (whether supported by server).
if (sUrl.indexOf('?') === -1) {
sUrl += '?download';
}
window.open(sUrl, '_blank');
return true;
}
window.downloadFile.isChrome = navigator.userAgent.toLowerCase().indexOf('chrome') > -1;
window.downloadFile.isSafari = navigator.userAgent.toLowerCase().indexOf('safari') > -1;

Answer 4

您可以使用此函数通过 fetch 下载图像

async function downloadImage(imageSrc) {
const image = await fetch(imageSrc)
const imageBlog = await image.blob()
const imageURL = URL.createObjectURL(imageBlog)
const link = document.createElement('a')
link.href = imageURL
link.download = 'image file name here'
document.body.appendChild(link)
link.click()
document.body.removeChild(link)
}

Answer 5

您的链接应具有强制下载的 ID：

<a download='website.jpg' id='blablabla' href="https://tinyjpg.com/images/social/website.jpg">
Download
</a>