Question

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

Is there a way to force the download of a file instead of opening the file in a new window? Right now if the file is a URL, like the example below it won't be downloaded and will open in a new window.

Thank you

Answer 1

您可能会被Firefox和Chrome 65+仅支持同源下载链接这一事实所困扰，这可能是一种安全措施。

来源：https://caniuse.com/#feat=download（请参阅“已知问题”标签）

Web超文本应用技术工作组（WHATWG）还建议在跨源方案（如您的示例中）中，托管相关图像/文件的Web服务器需要发送Content-Disposition HTTP download=的标题值得尊敬。

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

简而言之：

如果出现以下情况，您只能使用<a download='...'></a>强制下载图片/文件。

托管图片/文件的服务器也说应该下载，或
图片/文件来自同一个域。

Answer 2

也许您已经解决了，但是由于您将文件托管在S3上（请参见Peter B的答案的注释），因此需要在文件url中添加签名并设置{{1} }至ResponseContentType，使用aws sdk。我正在使用Node，因此它变为：

binary/octet-stream

我希望这会有所帮助。

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>

强制<a download=""> to download image instead of opening url link to image

5 个答案: