Question

我已经使用REST成功地将Java后端的附件发送到Angular。

我有结果示例：JVBERi0xLjQKJeLjz9MKMyAwIG9iago8PC9Db2xvclNwYWNlL0

角度：

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显示为pdf缩略图。

Answer 1

我认为这会起作用。

showPdf() {
        const linkSource = 'data:application/pdf;base64,' + ' JVBERi0xLjQKJeLjz9MKMyAwIG9iago8PC9Db2xvclNwYWNlL0';
        const downloadLink = document.createElement("a");
        const fileName = "sample.pdf";

        downloadLink.href = linkSource;
        downloadLink.download = fileName;
        downloadLink.click();
    }

Answer 2

如果我理解的没错，后端会发回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;
  });

您还可以了解

编辑：

如果我想使用来在html中显示pdf结果。你有什么想法吗预先感谢

以下是如何实现此目的的示例：https://stackblitz.com/edit/angular-rwfdhr

注意：

很遗憾，我无法在stackblitz.com上使ngx-extended-pdf-viewer工作。也许您可以在您的环境中尝试一下。我没有在本地尝试。相反，我使用了pdf-viewer，它开箱即用。但是我看不出它不应该与其他库一起使用的任何原因，因为工作流具有相同的原理。
我的解决方案基于我之前的回答。由于我不完全了解您的代码库，因此我以理解您的工作流程的方式完成了这些工作：
- 我创建了一个名为PdfService的服务（请参见pdf.service.ts），该服务基本上是从我刚刚创建的GitHub Gist中获取并返回base64编码的PDF内容。
- 在类AppComponent（app.component.ts）中，base64内容被解码并转换为blob，然后转换为DOMString URL（通过URL.createObjectURL）。
- 在app.component.html中，此URL只是传递给库以进行进一步处理。

编辑2：上面的示例并不完全适合Angular方式。您应该在服务中实现业务逻辑，并保持控制器尽可能精简。

这是一个演示：https://stackblitz.com/edit/angular-4k63jv

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

2 个答案: