Angular 4 - 将 base 64 转换为可下载文件

Question

我有一个 returns 一个 json 对象的 Rest Web 服务，其中一个属性包含一个代表简单文件的 base 64 字符串，这是 JSON 对象：

{
  "id": 9,
  "name": "Step ",
  "orderOf": 0,
  "description": "desc",
  "script": null,
  "file1": "PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPGptZXRlclRlc3RQbGFuIHZlcnNpb249IjEuMiIgcHJvcGVydGllcz0iNC4wIiBqbWV0ZXI9IjQuMCByMTgyMzQxNCI+CiAgPGhhc2hUcmVlPgogICAgPFRlc3RQbGFuIGd1aWNsYXNzPSJUZXN0UGxhbkd1aSIgdGVzdGNsYXNzPSJUZXN0UGxhbiIgdGVzdG5hbWU9IlRlc3QgUGxhbiIgZW5hYmxlZD0idHJ1ZSI+CiAgICAgIDxzdHJpbmdQcm9wIG5hbWU9IlRlc3RQbGFuLmNvbW1lbnRzIj48L3N0cmluZ1Byb3A+CiAgICAgIDxib29sUHJvcCBuYW1lPSJUZX",
  "file2": "IyBTYW1wbGUgdXNlci5wcm9wZXJ0aWVzIGZpbGUNCiMNCiMjICAgTGljZW5zZWQgdG8gdGhlIEFwYWNoZSBTb2Z0d2FyZSBGb3VuZGF0aW9uIChBU0YpIHVuZGVyIG9uZSBvciBtb3JlDQojIyAgIGNvbnRyaWJ1dG9yIGxpY2Vuc2UgYWdyZWVtZW50cy4gIFNlZSB0aGUgTk9USUNFIGZpbGUgZGlzdHJpYnV0ZWQgd2l0aA0KIyMgICB0aGlzIHdvcmsgZm9y"
}

我想让这两个文件都可以下载，包括将 base 64 字符串转换为 Blob，然后调用 FileSaver 库将它们导出为文件，但我得到的只是一个用 base 64 字符串字面填充的文件.

这是我的尝试：

downloadFile(file: Blob) {
    if (file !== null && file !== undefined) {
      var blob = new Blob([file], {type: 'text/plain'});
      saveAs(blob, "test.properties");
    }
  }

如何转换这些属性才能下载文件的真实内容。

Answer 1

在你的 file1 和 file2 属性中，你有 b64 编码的字符串。

这是一个将 b64 转换为 blob 的函数，试试这个：

public base64ToBlob(b64Data, contentType='', sliceSize=512) {
    b64Data = b64Data.replace(/\s/g, ''); //IE compatibility...
    let byteCharacters = atob(b64Data);
    let byteArrays = [];
    for (let offset = 0; offset < byteCharacters.length; offset += sliceSize) {
        let slice = byteCharacters.slice(offset, offset + sliceSize);

        let byteNumbers = new Array(slice.length);
        for (var i = 0; i < slice.length; i++) {
            byteNumbers[i] = slice.charCodeAt(i);
        }
        let byteArray = new Uint8Array(byteNumbers);
        byteArrays.push(byteArray);
    }
    return new Blob(byteArrays, {type: contentType});
}

所以你可以像这样使用你的函数

downloadFile(b64encodedString: string) {
    if (b64encodedString) {
      var blob = base64ToBlob(b64encodedString, 'text/plain');
      saveAs(blob, "test.properties");
    }
}

Angular 4 - 将 base 64 转换为可下载文件

Angular 4 - convert base 64 to a downloadable file

arrays

spring

filesaver.js

angular