Question

我正在尝试下载来自数据库和后端的docx文件。

Blob是来自我的REST API的base64字符串。

我尝试使用其他帖子/教程中的函数将它们转换回blob。我可以下载文件，但是当我尝试在Word中打开文件时，文件显示损坏。

这是我的组件代码：

geoJson

在html中，我正在使用：

     export class ListComponent implements OnInit {

         files: {};

         constructor( private fileService : CustomService) { }
         ngOnInit() {

       this.fileService.getAllFiles().subscribe(
            data => {
              this.files = data;
            },
            error => console.log(error)
          )
      }


   saveData = (function () {
        var a = document.createElement("a");
        document.body.appendChild(a);
       // a.style = "display: none";
        return function (data, fileName) {
            var json = JSON.stringify(data),
                blob = new Blob([json], {type: "octet/stream"}),
                url = window.URL.createObjectURL(blob);
            a.href = url;
            a.download = fileName;
            a.click();
            window.URL.revokeObjectURL(url);
        };
    }());

JSON：

    <li *ngFor="let file of files">
        <a target="_self" download="{{file.file_name}}"      (click)="saveData(file.upload_file,file.file_name )">{{file.file_name}}</a>
    </li>

Answer 1

您需要解码base64数据。

创建一个采用已解码字符串形式的函数，并将其转换为blob，如下所示：

base64toBlob(byteString) {
    var ia = new Uint8Array(byteString.length);
    for (var i = 0; i < byteString.length; i++) {
      ia[i] = byteString.charCodeAt(i);
    }
    return new Blob([ia], { type: "octet/stream" });
  }

然后，执行JSON.stringify(data)而不是atob(data)，并将其传递给base64toBlob以创建我们的Blob：

  var json = atob(data),
    blob = this.base64toBlob(json),

其余的代码应该可以工作。

Here is a StackBlitz demo

在angular 5中下载损坏的docx文件

1 个答案: