Custom pdf rendering in ng2-pdf-viewer for large pdf documents?

Question

I am using the ng2-pdf-viewer to display a pdf in my angular app. However, the viewer waits for the pdf to be downloaded completely and then displays it. The server sends me the pdf data in a byte array form. Is there a way to show the pdf while it is getting fetched from the server simultaneously ?

PS: This is how I am fetching the data and assigning it to the src attribute

    this.httpClient.get(`{url}`,{'responseType'  : 'arraybuffer'})
    .subscribe((file: ArrayBuffer) => {
      this.pdfSrc = file;
    }

Answer 1

The ng2-pdf-viewer accepts range requests. You need to mention your src attribute in this format obj ={'url' : 'url of the pdf', 'rangeChunkSize' : '1024'}.

I referred this article to create my server which would accept range requests - https://medium.com/@vishal1909/how-to-handle-partial-content-in-node-js-8b0a5aea216

So in the first call from the UI, the client notices the header as 'Accept-Ranges":"bytes". The next call is made by the pdf viewer which will render the pdf in chunks of data.

Minor Change: in the else part of this(i.e when no range is received)- https://medium.com/@vishal1909/how-to-handle-partial-content-in-node-js-8b0a5aea216 , comment this portion let readable =, and replace it with res.end()