I currently have a backend java service that converts html to pdfs for me using itext. I return the pdf as a byte[] just fine to the client(Angular 5). But I end up getting "invalid pdf structure" when I try running the getDocument function on it. I do not believe that the pdf structure is actually invalid. I uploaded my html template to an online pdf converter and it worked just fine.

This is what I'm getting from the backend:

This is my pdfjs code:

class MyDocumentsProvider{
      downloadPdf():any{
    return this.http.get(environment.webappServer+"/get1098E", {responseType:'arraybuffer'}).map(
      (res) =>{
          return res;
        }
      )
  }
}
this.myDocumentsProvider.downloadPdf().subscribe((res)=>{
        PDFJS.disableWorker = true; //<-- removing this does nothing

        PDFJS.getDocument(res).then((pdf)=>{
          this.showLoader = false;
            this.pdf = pdf;
            this.pagesTotal = pdf.numPages;
            pdf.getPage(this.pageNum).then((page) => {
                this.handlePages(page);
          this.writeFile();
            })
        }).catch((err)=>{
            this.showError = true;
        console.error(err);
        })
    },((err)=>{
      this.showError = true;
      console.error(err);
    }))
}

I've also tried doing

    PDFJS.getDocument(new Uint8Array(res))then((pdf)...

I have tested this code with direct url to a pdf file and it works.

This is some java code:

@RequestMapping(value="/testPdf",  headers="Accept=*/*", method = RequestMethod.GET)
    public ResponseEntity<?> testPdf() throws IOException{


        HttpHeaders responseHeaders = new HttpHeaders();
        responseHeaders.add("Content-Type","application/octet-stream;charset=UTF-8"); //<-- this was added later on.  Did nothing....
        ResponseEntity <byte[]> arr = pdfService.htmlTemplateToPdf()
        return new ResponseEntity<>(arr,responseHeaders, HttpStatus.OK);

    }

Please lend me your assistance fellow SOs!

I currently have a backend java service that converts html to pdfs for me using itext. I return the pdf as a byte[] just fine to the client(Angular 5). But I end up getting "invalid pdf structure" when I try running the getDocument function on it. I do not believe that the pdf structure is actually invalid. I uploaded my html template to an online pdf converter and it worked just fine.

This is what I'm getting from the backend:

This is my pdfjs code:

class MyDocumentsProvider{
      downloadPdf():any{
    return this.http.get(environment.webappServer+"/get1098E", {responseType:'arraybuffer'}).map(
      (res) =>{
          return res;
        }
      )
  }
}
this.myDocumentsProvider.downloadPdf().subscribe((res)=>{
        PDFJS.disableWorker = true; //<-- removing this does nothing

        PDFJS.getDocument(res).then((pdf)=>{
          this.showLoader = false;
            this.pdf = pdf;
            this.pagesTotal = pdf.numPages;
            pdf.getPage(this.pageNum).then((page) => {
                this.handlePages(page);
          this.writeFile();
            })
        }).catch((err)=>{
            this.showError = true;
        console.error(err);
        })
    },((err)=>{
      this.showError = true;
      console.error(err);
    }))
}

I've also tried doing

    PDFJS.getDocument(new Uint8Array(res))then((pdf)...

I have tested this code with direct url to a pdf file and it works.

This is some java code:

@RequestMapping(value="/testPdf",  headers="Accept=*/*", method = RequestMethod.GET)
    public ResponseEntity<?> testPdf() throws IOException{


        HttpHeaders responseHeaders = new HttpHeaders();
        responseHeaders.add("Content-Type","application/octet-stream;charset=UTF-8"); //<-- this was added later on.  Did nothing....
        ResponseEntity <byte[]> arr = pdfService.htmlTemplateToPdf()
        return new ResponseEntity<>(arr,responseHeaders, HttpStatus.OK);

    }

Please lend me your assistance fellow SOs!

• javascript
• java
• angular
• pdf.js

2 Answers 2

Instead of :

return this.http.get(environment.webappServer+"/get1098E", {responseType:'arraybuffer'}).map(
  (res) =>{
      return res;
    }
  )

I just removed the responseType:'arraybuffer'. Then I took the response and manually converted it into a typed array (Uint8Array). I guess responseType:arraybuffer was giving back something corrupted.

For me, I was trying to load a PDF via the data parameter but feeding in base64 directly. As you docs say, you need to convert to binary before loading. Historically this is done with atob() however it is better now to get the binary representation directly from whatever is supplying it