Question

我从数据库中获得了base64格式的图像，我想让用户下载图像。最好的方法是什么？

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/

Answer 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);

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

`

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

将文件下载为打字稿中的文件

4 个答案:

在服务文件上