How to convert string Base64 to pdf in angular 7

Question

I have successfully sent an attachment from the Java back end to Angular using REST.

I have the result example: 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);
          })
      })

I want to show the pdf in my view (html). But the problem is that in the back end I encode InputStream to Base64.getEncoder(). I want to know how to display the pdf as pdf-thumbnail in the front end.

score 23 · Accepted Answer · 2019-05-02T18:18:35.017

If I understood that right, the backend sends back base64 encoded data. So, you have to decode the response data first. The workflow should look like this:

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

Further you can read about

Edit:

if i want to display the pdf result in my html using . do you have any idea how to do it. thanks in advance

Here is an example how you achieve this: https://stackblitz.com/edit/angular-rwfdhr

Notes:

Unfortunately I couldn't make ngx-extended-pdf-viewer work on stackblitz.com. Maybe you can give it a try in your environment. I didn't try it locally. Instead I used pdf-viewer and it just worked out-of-the-box. But I don't see any reason why it shouldn't work with another library, because the workflow has the same principle.
My solution is based on my previous answer. Since I don't know your code base exactly, I've done things the way I understood your workflow:
- There is a service called PdfService (see pdf.service.ts) I created, which basically fetches and returns the base64 encoded PDF content from GitHub Gist that I just created.
- In the class AppComponent (app.component.ts) the base64 content is decoded and converted to blob and that to a DOMString URL (via URL.createObjectURL).
- In app.component.html this URL is simply passed to the library for further processing.

Edit 2: The above example does not fit perfectly to Angular way. You should implement the business logic in the services, and keep the controllers as lean as possible.

Here's a demo: https://stackblitz.com/edit/angular-4k63jv

thanks for your response, i tried atob() not working. this one worked let content = encodeURIComponent(fileUploaded.content); — Imen Slema, Apr 29 '19 at 13:59
Hm, I don't understand how and why `encodeURIComponent()` worked, since I have no information on the `fetch(fileUploaded.content) ` call. I thought you are fetching the file content from backend with that call, where `fileUploaded.content` is the URL to this file. Anyway, glad, I could somehow help. :D — , Apr 29 '19 at 14:05
if i want to display the pdf result in my html using . do you have any idea how to do it. thanks in advance — Imen Slema, Apr 30 '19 at 16:22

How to convert string Base64 to pdf in angular 7

1 Answers1