Converting base64 string to uint8Array or Blob in Typescript/Angular8

2.9k Views Asked by At

I'm fairly new to working with Base64 encoded string/uint8Array, or Blob. I'm using a pdf viewer library from this repo https://github.com/intbot/ng2-pdfjs-viewer for our Angular 8 webapp. I'm sending a fairly large Base64 string(550KB to the UI(containing 34 pages of text), to be rendered by the pdf viewer.

The main issue is that it is only displaying 19 pages in the viewer. However, when I download the document, using the viewer, it has all the 34 pages (confirmed with Preview app on MacOS). I'm not sure if the issue is with the pdf viewer library or the conversion from Base64 to uint8Array/Blob.

Here is the code in the UI to convert the Base64 string

dostuff(b64Data){
    const byteCharacters = atob(b64Data);
    const byteNumbers = new Array(byteCharacters.length);
    for (let i = 0; i < byteCharacters.length; i++) {
      byteNumbers[i] = byteCharacters.charCodeAt(i);
    }
    const byteArray = new Uint8Array(byteNumbers);
    //const blob = new Blob([byteArray], {type: 'application/pdf'});
    //console.log(blob)
    return byteArray
  }

Any help would be greatly appreciated. Browser used: Chrome

1

There are 1 best solutions below

0
On BEST ANSWER

This has been resolved. The issue was with the backend API merging the PDFs together. Using Apache PDFBox's pdf merger utility, which accepts input streams and the merged pdf document was successfully rendered by the ng2-pdfjs-viewer library. There was no issue with the above JS code.