Question

在Angular 5中，我想从localhost（服务器）下载图像。我已经有图像名称，其路径为：http://localhost/projectName/uploads/3/1535352341_download.png 现在，我想通过单击一个按钮进行下载。

在Angular的HTML视图中，我编写了以下代码：

<button (click)="downloadImage(car.carItem.carTitle)" type="button" class="btn btn-sm btn-info btn-action" tooltip="Download Image" placement="left" container="body"><i class="fa fa-download" aria-hidden="true"></i></button>

在.ts文件中，我执行以下操作，但是它将在同一标签中打开图像：

downloadImage(imagePath){
  window.location = imagePath;
}

我已经看过帖子Angular 4 direct download images，但是找不到任何解决方案。因此，请勿将其标记为重复。

Answer 1

<a href=" http://localhost/projectName/uploads/3/1535352341_download.png" class="btn clss"
                  target="_self" download>Download</a>

Answer 2

由于图像位于远程服务器上，出于安全原因，不能像使用自己的资源那样简单地下载图像。

这是一个简单的downloadUrl函数，它将要求浏览器下载任何给定的URL：

function downloadUrl(url: string, fileName: string) {
  let a: any = document.createElement('a');
  a.href = url;
  a.download = fileName;
  document.body.appendChild(a);
  a.style = 'display: none';
  a.click();
  a.remove();
};

由于我们无法下载远程资源，因此我们将不得不在客户端构建它。我们将获取资源并创建自己的URL。然后，我们终于可以使用我们的downloadUrl函数来下载它了。

constructor(
  private http: HttpClient,
) { }

this.http.get(urlImage, { responseType: 'blob' }).subscribe(val => {
  console.log(val);
  let url = URL.createObjectURL(val);
  downloadUrl(url, 'image.png');
  URL.revokeObjectURL(url);
});

Answer 3

TypeError                                 Traceback (most recent call last)
<ipython-input-10-9d84068180f9> in <module>()
     19 
     20 tk = pairwise_tukeyhsd(T,N)
---> 21 tk.plot_simultaneous(comparison_name ='c',ax=ax)

C:\Anaconda3\lib\site-packages\statsmodels\sandbox\stats\multicomp.py in plot_simultaneous(self, comparison_name, ax, figsize, xlabel, ylabel)
    733                 if self.groupsunique[i] == comparison_name:
    734                     continue
--> 735                 if (min(maxrange[i], maxrange[midx]) -
    736                                          max(minrange[i], minrange[midx]) < 0):
    737                     sigidx.append(i)

TypeError: only integer scalar arrays can be converted to a scalar index

}

  constructor(private rs: RequestService,
          private http: Http,
          private sanitizer: DomSanitizer) {

}

 getImage(imageUrl: string) {
return this.http.get(imageUrl, {responseType: ResponseContentType.Blob})
  .map((res) => {
    return new Blob([res.blob()], {type: res.headers.get('Content-Type')});
  });

}

Answer 4

感谢@Ploppy引导我朝正确的方向前进，

这是我的解决方案，使用访存（TypeScript）和绕过cors

const getExternalImageFromURL = (requesturl: string): Promise<Blob> => {
    const proxyurl = "https://cors-anywhere.herokuapp.com/";

    return fetch(proxyurl + requesturl).then((res) => {
        return res.blob();
    });
};

Answer 5

每当您需要在应用程序中执行CORS时，则在服务器端必须有某种机制仅允许指定的跨站点请求，因此下面的代码段适用于NodeJ

let middle_ware = (req, res, next) => next();
...
return function (req, res, next) {
    const allowed_Origins = ['http://any_url.com'];
    const origin = req.headers.origin;
    if (allowed_Origins.includes(origin)) {
      res.header('Access-Control-Allow-Origin', origin);
    }
    res.header('Access-Control-Allow-Headers', 'Origin, X-Requested-With, Content-Type, Accept');
    res.header({
      HttpOnly: true,
      Secure: true,
      SameSite: 'None',
    });
    middle_ware(req, res, next);
  };

，如果您使用的是PHP，希望在PHP中对您有所帮助Cross-Origin Request Headers(CORS) with PHP headers 谢谢！

Angular 5如何下载远程映像

5 个答案: