如何在Angular 7中将字符串Base64转换为PDF

Question

我已经成功地通过REST从Java后端向Angular发送了附件。

我有一个结果示例：JVBERi0xLjQKJeLjz9MKMyAwIG9iago8PC9Db2xvclNwYWNlL0

Angular：

getImage() {
    this._invoiceCreationHttpService.getImage().subscribe((data: any) => {
      data.forEach(fileUploaded => {
        fetch(fileUploaded.content)
          .then(res => res.blob())
          .then(blob => {
            this.ConvertedBlob = new Blob([fileUploaded.content], {
              type: 'data:application/pdf;base64,'
            });

            console.log(this.ConvertedBlob);
          })
      })

我想在我的视图（HTML）中显示PDF。但问题在于在后端，我将InputStream编码为Base64.getEncoder()。我想知道如何在前端显示PDF缩略图。

- Imen Slema

Answer 1

如果我没理解错的话，后端会回传base64编码的数据。所以，你需要先解码响应数据。工作流程应该是这样的:

fetch(fileUploaded.content) 
  .then(response => {
    // response.data -> response data base64 encoded
    // decoding the data via atob()
    const byteArray = new Uint8Array(atob(response.data).split('').map(char => char.charCodeAt(0)));
    return new Blob([byteArray], {type: 'application/pdf'});
  })
  .then(blob => {
    // Here is your URL you can use
    const url = window.URL.createObjectURL(blob);

    // i.e. display the PDF content via iframe
    document.querySelector("iframe").src = url;
  });

进一步了解可以阅读以下内容：

创建一个 Blob 对象并将其转换为 JavaScript 中的 base64 字符串：Creating a Blob from a base64 string in JavaScript 了解atob()函数：atob() 如果想在 HTML 中展示 PDF 结果，可以参考这个示例: https://stackblitz.com/edit/angular-rwfdhr。其中使用的是 pdf-viewer 库，但原理相同，因此其他库也可以使用。

注意：以上示例基于作者之前的答案，可能需要根据不同的工作流程进行修改。建议将业务逻辑放在服务中，保持控制器尽可能精简。具体实现可以参考这个演示：https://stackblitz.com/edit/angular-4k63jv。

- user6576367

---

谢谢您的回复，我尝试了atob()但不起作用，这个可以用 let content = encodeURIComponent(fileUploaded.content); - Imen Slema

嗯，我不明白为什么和如何 encodeURIComponent() 起作用，因为我没有关于 fetch(fileUploaded.content) 调用的信息。我以为你是通过那个调用从后端获取文件内容，其中 fileUploaded.content 是该文件的 URL。无论如何，很高兴我能在某种程度上帮助到你。 :D - user6576367

如果我想在我的HTML中使用<ngx-extended-pdf-viewer [src]="">显示PDF结果，你有任何想法如何实现吗？提前感谢。 - Imen Slema