How to use Angular ngx-extended-pdf-viewer with Turnjs flipbook

Question

sorry if my english is not good. I have a project that uses angular to read pdf files and display them as flipbooks. I am using ngx-extended-pdf-viewer with turnjs library. However, they can hardly work together. Please help me improve that. I read the pdf file in angular as below:

component.html

<ngx-extended-pdf-viewer height="80vh" width="100%" zoom="100%"
[src]="src"
[useBrowserLocale]="true"
[spread]="'off'"
(pdfLoaded)="pdfLoadedEvent($event)">
</ngx-extended-pdf-viewer>

component.ts

public pdfLoadedEvent(event: PdfLoadedEvent): void {
  $("#viewer").turn().turn('page',2);
  $("#previous, #next").click(function()
  {
    $("#viewer").turn($(this).text());
  });
}
public src = '../../../../assets/pdf/text.pdf'

I was able to read the pdf file, I can also use turnjs on angular to create a flipbook, however when using both at the same time it doesn't work.

Answer 1

Oh, that's quite a challenge. Getting turn.js up and running with ngx-extended-pdf-viewer requires you do modify the base library, pdf.js, and that's not easy. However, I've got good news for you: I've implemented a working (well, sort of working) prototype in version 10. It's using a different library, but it's the same idea. Look here: https://pdfviewer.net/extended-pdf-viewer/book-mode

(But don't expect to much - at the time of writing it's an unfinished feature).