将图像下载为打字稿中的文件答案

【问题标题】：Download image as file in typescript将图像下载为打字稿中的文件
【发布时间】：2021-08-03 21:30:00
【问题描述】：

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

【问题讨论】：

【解决方案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/

【讨论】：

可以看到responseType: ResponseContentType.Blob of typescipt ，可以帮到你

【解决方案2】：

这是一个从 blob 流创建文件的完整解决方案：

private base64ToFile(base64Data, tempfilename, contentType) {
    contentType = contentType || '';
    const sliceSize = 1024;
    const byteCharacters = atob(base64Data);
    const bytesLength = byteCharacters.length;
    const slicesCount = Math.ceil(bytesLength / sliceSize);
    const byteArrays = new Array(slicesCount);

    for (let sliceIndex = 0; sliceIndex < slicesCount; ++sliceIndex) {
      const begin = sliceIndex * sliceSize;
      const end = Math.min(begin + sliceSize, bytesLength);

      const bytes = new Array(end - begin);
      for (let offset = begin, i = 0; offset < end; ++i, ++offset) {
        bytes[i] = byteCharacters[offset].charCodeAt(0);
      }
      byteArrays[sliceIndex] = new Uint8Array(bytes);
    }
    return new File(byteArrays, tempfilename, {type: contentType});
  }

直接下载，我用File-Saver library:

安装：

npm install file-saver --save

导入部分：

import * as FileSaver from 'file-saver';

关于下载功能：

const myFile = this.base64ToFile(stream, documentName, contentType);
FileSaver.saveAs(myFile, document.name);

【讨论】：

【解决方案3】：

试试这个代码，它可以工作`

download(row) {
    return this.Http
      .get(file_path , {
        responseType: ResponseContentType.Blob,
      })
      .map(res => {
        return {
          filename: row.name,
          data: res.blob()
        };
      })
      .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 = res.filename;
        a.click();
        window.URL.revokeObjectURL(url);
        a.remove();
      });
  }

【讨论】：

【解决方案4】：

关于服务文件

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();
    });

【讨论】：