在打字稿中将图像下载为文件

Question

我从数据库中获取了一个 base64 格式的图像，我想允许用户下载该图像。最好的方法是什么？

原文由 Amichay_Atias 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

考虑到您将此问题标记为 Angular 问题，我想出于某种原因，您不想公开以原始格式提供图像的端点，然后创建指向它的链接。

如果您正在寻找特定于 Angular 的解决方案，则没有。但是，下面描述了一个纯 javascript 解决方案。它可用于预加载您的图像，以便您的用户能够在需要时立即获取图像。

 let byteCharacters = atob('your base64 data');

let byteNumbers = new Array(byteCharacters.length);
for (var i = 0; i < byteCharacters.length; i++) {
    byteNumbers[i] = byteCharacters.charCodeAt(i);
}

let byteArray = new Uint8Array(byteNumbers);

let blob = new Blob([byteArray], {"type": "image/jpeg"});

if(navigator.msSaveBlob){
    let filename = 'picture';
    navigator.msSaveBlob(blob, filename);
} else {
    let link = document.createElement("a");

    link.href = URL.createObjectURL(blob);

    link.setAttribute('visibility','hidden');
    link.download = 'picture';

    document.body.appendChild(link);
    link.click();
    document.body.removeChild(link);
}

你可以在这里测试： https ://jsfiddle.net/pxm0eyzs/2/

原文由 Guerric P 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

在服务文件上

downloadimage(imagePath) {
    return this.http
      .get(
        imagePath,
        {
          responseType: "blob"
        }
      )
      .pipe(
        map(res => {
          return {
            filename: row.name,
            data: res
          };
        })
      );
  }
}

在 ts 文件上从服务文件订阅 downloadImage()

 downloadimage(path).subscribe(res => {
      let url = window.URL.createObjectURL(res.data);
      let a = document.createElement("a");
      document.body.appendChild(a);
      a.setAttribute("style", "display: none");
      a.href = url;
      a.download = "test.png";
      a.click();
      window.URL.revokeObjectURL(url);
      a.remove();
    });

原文由 Rohit Kumar 发布，翻译遵循 CC BY-SA 4.0 许可协议