C

onverting base64 data and showing this as a file in our webpage is tricky sometime. I wrote this article, because I was facing problem in showing base64 data into PDF in one of the my project. The scenario was, I was getting the base64 data in API response, and I need to show a new popup window and in this popup the pdf supposed to shown. That pdf supposed to be generated by that API response.

So to acheive this goal, I explored a lot and found the best way is, I convert that base64 into Blob data and later shown this blob data into iFrame.

Let's have a look on below function to convert base64 data into Blob data

                    b64toBlob = (b64Data, contentType = 'application/pdf', sliceSize = 512) => {
                        const byteCharacters = atob(b64Data);
                        const byteArrays = [];
                    
                        for (let offset = 0; offset < byteCharacters.length; offset += sliceSize) {
                          const slice = byteCharacters.slice(offset, offset + sliceSize);
                          const byteNumbers = new Array(slice.length);
                    
                          for (let i = 0; i < slice.length; i++) {
                            byteNumbers[i] = slice.charCodeAt(i);
                          }
                          const byteArray = new Uint8Array(byteNumbers);
                          byteArrays.push(byteArray);
                        }
                    
                        const blob = new Blob(byteArrays, { type: contentType });
                    
                        return blob;
                      }         
                          

In the below codes, I am doing following stuff:

* Opening a new popup window with width 100 and height 100.
* Getting a reference of that new window and calling open().
* Resizing that window to screen width and height.
* specifying the content type ('application/pdf').
* Converting base64 data to blob data with given contentType.
* Writing this blob data into iFrame and then adding it into document.
* Printing that contentWindow with getElementById.

Let's see in the codes:

                            print = (base64Data) => {
                    
                                const newWindow = window.open('', '', 'width=100, height=100');
                    
                                if(newWindow){
                    
                                  const document = newWindow.document.open();
                                  document.close();
                                  newWindow.moveTo(0, 0);
                                  newWindow.resizeTo(window.screen.width, window.screen.height);
                                  const contentType = 'application/pdf';
                                  const b64Data = base64Data;
                                  const blob = this.b64toBlob(b64Data, contentType);
                                  const blobUrl = URL.createObjectURL(blob);
                    
                                  document.write(`<iframe id="pdfDocument"
                                  src="${blobUrl}" 
                                  width="100%"
                                  height="100%"
                                  frameBorder="0" ></iframe>`);
                    
                                  const docs = document.getElementById('pdfDocument');
                    
                                  setTimeout(() => {
                                    docs.contentWindow.print();
                                  }, 1000)
                                }
                              }
                                     
                          

Let's call the print function to convert that base64 into pdf.

                            print('VBERi0xLjUKJeLjz9MKMiAwIG9iago8PC9Db2xvclNwYWN...')
                        

---

Conclusion:

In this article, we converted base64 data into pdf and shown this pdf in a new popup window. We converted base64 into blob data and displayed this blob in new popup window using iFrame.