Question

我有一个URL，我需要下载的图像在其中。我想要一个按钮来下载它。我尝试了这两个选项：

const a = document.createElement('a');
    a.href = ImageURL;
    a.download = title;
    document.body.appendChild(a);
    a.click();

和

 window.location.href = t;

但是这两个选项都只是打开带有图像的新窗口。

有没有一种方法可以代替下载新文件的新窗口？

Answer 1

这不是一个尖锐的问题。在以下情况下，您只能使用download属性来强制下载图像/文件：

服务器还说应该下载它，或者
图片来自同一域。

这是跨源href的问题。

https://stackoverflow.com/a/17527821/4899523

https://stackoverflow.com/a/49736875/4899523

Answer 2

例如，您可以尝试在download中添加HTML属性

<a href="IMAGE_URL" download="imagename.png">

但是据我所知，新浏览器中存在一些限制。

Answer 3

这是使用javascript的实现，需要使用IE，Firefox和Chrome从URL下载图像。小型黑客有必要使用httpclient获取作为Blob的图像，然后在DOM中创建一个元素，并模拟该元素的单击以强制浏览器下载图像。

HTML：

    <img src="IMAGE_URL" #img>
    <a href="javascript:void(0);" (click)="downloadImage(img)">Download</a>

打字稿：

    constructor(private httpClient: HttpClient) {
    }
    
    downloadImage(img) {
       const imgUrl = img.src;
       const imgName = imgUrl.substr(imgUrl.lastIndexOf('/') + 1);
       this.httpClient.get(imgUrl, {responseType: 'blob' as 'json'})
         .subscribe((res: any) => {
           const file = new Blob([res], {type: res.type});

           // IE
           if (window.navigator && window.navigator.msSaveOrOpenBlob) {
             window.navigator.msSaveOrOpenBlob(file);
             return;
           }

           const blob = window.URL.createObjectURL(file);
           const link = document.createElement('a');
           link.href = blob;
           link.download = imgName;

           // Version link.click() to work at firefox
           link.dispatchEvent(new MouseEvent('click', {
             bubbles: true,
             cancelable: true,
             view: window
           }));

           setTimeout(() => { // firefox
             window.URL.revokeObjectURL(blob);
             link.remove();
           }, 100);
         });
     }

从Angular 5中的url下载图像

3 个答案: