我创建了一个SPRING BOOT服务，可以存储不同类型的文件。当我尝试将这项服务使用到ANGULAR时，图像也正常工作，但是当我尝试使用ng-pdf-
viewer显示pdf文件时，它对我不起作用。

我的component.ts：

export class AppComponent {
  constructor(private httpClient: HttpClient) {}
  tag: string;
  selectedFile: File;
  retrievedFile: any;
  base64Data: any;
  retrieveResonse: any;
  message: string;
  UserTag: any;

  //Gets called when the user selects a file

  public onFileChanged(event) {
    //Select File
    this.selectedFile = event.target.files[0];
  }

//当用户单击提交以上传文件时被调用

  onUpload() {
    console.log(this.selectedFile);

// FormData API提供了方法和属性，使我们可以轻松地准备要通过POST HTTP请求发送的表单数据。

    const uploadImageData = new FormData();
    uploadImageData.append("file", this.selectedFile, this.selectedFile.name);
    uploadImageData.append("tag", this.tag);

    //Make a call to the Spring Boot Application to save the file
    this.httpClient
      .post("http://localhost:8080/do", uploadImageData, {
        observe: "response"
      })
      .subscribe(response => {
        if (response.status === 200) {
          this.message = "Image uploaded successfully";
        } else {
          this.message = "Image not uploaded successfully";
        }
      });
  }

//当用户单击“检索文件”按钮以从后端获取图像时被调用

  getFile() {
    //Make a call to Spring Boot to get the file Bytes.
    this.httpClient
      .get("http://localhost:8080/get/" + this.UserTag)
      .subscribe(res => {
        this.retrieveResonse = res;
        this.base64Data = this.retrieveResonse.fileContent;
        if (
          this.retrieveResonse.fileType == "jpg" ||
          this.retrieveResonse.fileType == "png" ||
          this.retrieveResonse.fileType == "jpeg"
        ) {
          this.retrievedFile = "data:image/jpg;base64," + this.base64Data;
        }

        if (this.retrieveResonse.fileType == "pdf") {
          var blob = new Blob([this.base64Data], { type: "application/pdf" });
          this.retrievedFile = blob;
        }
      });
  }
}

get方法：

public DBFile getFile( String fileTag) throws IOException {

        final Optional<DBFile> retrievedFile = fileRepo.findByFileTag(fileTag);
        DBFile img = new DBFile(retrievedFile.get().getName(), retrievedFile.get().getFileType(),
                decompressBytes(retrievedFile.get().getFileContent()),retrievedFile.get().getAddedAt(),retrievedFile.get().getFileTag());

decompress方法：//解压缩文件字节，然后再将其返回给angular应用程序

    public static byte[] decompressBytes(byte[] data) {
        Inflater inflater = new Inflater();
        inflater.setInput(data);
        ByteArrayOutputStream outputStream = new ByteArrayOutputStream(data.length);
        byte[] buffer = new byte[1024];
        try {
            while (!inflater.finished()) {
                int count = inflater.inflate(buffer);
                outputStream.write(buffer, 0, count);
            }
            outputStream.close();
        } catch (IOException ioe) {
        } catch (DataFormatException e) {
        }
        return outputStream.toByteArray();
    }

    return img;
}

我的组件。HTML

<div class="container row">

  <div class="col-md-12">

    <h1>Upload Image</h1>

  </div>

</div>



<div class="container row">

  <div class="col-md-6">

    <input type="file" (change)="onFileChanged($event)" />

  </div>

  <div class="col-md-6">

    <div class="form-group">

      <label for="form">tag</label>

      <input

        type="text"

        class="form-control"

        id="tag"

        [(ngModel)]="tag"

        required

      />

    </div>

  </div>

  <div class="col-md-6">

    <input type="button" (click)="onUpload()" value="upload" />

  </div>

</div>

<hr />

<div class="container row">

  <div class="col-md-12">

    <div *ngIf="message">{{ message }}</div>

  </div>

</div>

{{ this.retrieveResonse | json }}



<div class="container row">

  <div class="col-md-6">

    <input

      type="text"

      class="form-control"

      id="name"

      placeholder="File Tag"

      [(ngModel)]="UserTag"

      name="name"

    />

  </div>

  <div class="col-md-6">

    <input type="button" (click)="getFile()" value="Get File" />

  </div>

</div>



<div class="container row">

  <div class="col-md-12">

    <div>

      <pdf-viewer

        [src]="retrievedFile"

        [render-text]="true"

        style="display: block;"

      ></pdf-viewer>

    </div>

  </div>

</div>

控制台错误：控制台错误的 照片

有需要帮助的人吗？..