Angular 角度：将blob转换为pdf

我创建了一个SPRING引导服务，它可以存储不同类型的文件。当我尝试将此服务用于ANGULAR时，图像也可以工作，但当我尝试使用ng pdf viewer显示pdf文件时，它对我不起作用

my component.ts：

//当用户单击submit以上载文件时调用

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

//当用户单击retrieve filebutton从后端获取图像时调用

获取方法：

my component.HTML

上传图像
标签

{{message}}
{{this.retrieveResonse | json}

您不能在pdf viewer中将blob文件作为src传递，您必须将其转换为safeUrl进行预览。希望这会有所帮助

import { DomSanitizer, SafeResourceUrl } from '@angular/platform-browser'; // import
constructor(private sanitizer: DomSanitizer) // include in constructor

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


      const url = URL.createObjectURL(blob);

      this.retrievedFile = window.open(url);

base64ToArrayBuffer方法：

\u base64ToArrayBuffer（base64）{
const binary_string=window.atob（this.base64Data）；
const len=二进制字符串长度；
常量字节=新的Uint8Array（len）；
for（设i=0；i

console中有任何错误吗？您的api返回响应是否为base64格式？@SayoojVR yes，“无效参数对象：需要.data、.range或.url”我已经添加了一张显示完整错误的照片。@SayoojVR和我添加了get方法和uncompress方法以使事情更清楚您好，感谢您的帮助，但当我尝试使用ng2 pdf viewer时，会出现相同的控制台错误，当我将其替换为错误时，会出现“资源URL上下文中使用的不安全值”，因此我创建了一个名为“安全”的管道，它解决了问题，但iframe没有显示pdf。并且会出现一些警告：AngularCompilerPlugin:分叉类型检查器意外退出。返回到主线程上的类型检查。“如果（this.retrieveResonse.fileType==“pdf”）{var blob=new blob（[this.base64Data]，{type:“application/pdf”}）；const url=url.createObjectURL（blob）window.open（url）；}chk这是预览打开的pdf窗口，出现此错误“加载pdf文档失败”

  //Gets called when the user selects a file

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

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

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

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

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

import { DomSanitizer, SafeResourceUrl } from '@angular/platform-browser'; // import
constructor(private sanitizer: DomSanitizer) // include in constructor

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


      const url = URL.createObjectURL(blob);

      this.retrievedFile = window.open(url);

_base64ToArrayBuffer(base64) {
    const binary_string = window.atob(this.base64Data);
    const len = binary_string.length;
    const bytes = new Uint8Array(len);
    for (let i = 0; i < len; i++) {
      bytes[i] = binary_string.charCodeAt(i);
    }
    return bytes.buffer;
  }