@grapecity/gcpdfviewer with Angular and TypeScript

Posted by: laura.frey on 24 February 2021, 7:03 am EST

  • Posted 24 February 2021, 7:03 am EST

    I'm currently working on a PoC to integrate the GcPdfViewer into our application but when I run our application locally and log into it to see if I can get the viewer to display with a new, blank document, the viewer comes up but I get the following errors in the Chrome DevTools Console. The viewer does display the error as well but because of where it shows it, it's truncated and I'm not able to see the entire error without looking in the browser console.

    The pdf worker has been disabled. Note, rendering PDF in foreground thread can slow pdf viewer performance.

    errors.ts:30 ERROR Error: Uncaught (in promise): Error: Setting up fake worker failed: "(SystemJS) Unexpected token '<'
    SyntaxError: Unexpected token '<'
    at eval (<anonymous>)
    Evaluating http://localhost:59981/pdfjs/core/worker
    Error loading http://localhost:59981/pdfjs/core/worker".
    Error: Setting up fake worker failed: "(SystemJS) Unexpected token '<'
    SyntaxError: Unexpected token '<'
    at eval (<anonymous>)
    Evaluating http://localhost:59981/pdfjs/core/worker
    Error loading http://localhost:59981/pdfjs/core/worker".
    at eval (gcpdfviewer.js:1)
    at e.invoke (zone.min.js:13)
    at Object.onInvoke (ng_zone.ts:308)
    at e.invoke (zone.min.js:13)
    at t.run (zone.min.js:13)
    at zone.min.js:21
    at e.invokeTask (zone.min.js:13)
    at Object.onInvokeTask (ng_zone.ts:293)
    at e.invokeTask (zone.min.js:13)
    at t.runTask (zone.min.js:13)
    at D (zone.min.js:21)
    at D (zone.min.js:21)
    at zone.min.js:21
    at e.invokeTask (zone.min.js:13)
    at Object.onInvokeTask (ng_zone.ts:293)
    at e.invokeTask (zone.min.js:13)
    at t.runTask (zone.min.js:13)
    at _ (zone.min.js:13)
    at t.invokeTask [as invoke] (zone.min.js:13)
    at _ (zone.min.js:44)


    However, when I follow the instructions to create just a base project to display a PDF, it works beautifully.

    Within our application we use the systemjs.config.js to obtain the packages we need, which I added as '@grapecity/gcpdfviewer': 'npm:@grapecity/gcpdfviewer@2.0/gcpdfviewer.js'.

    I set up a very generic TypeScript component:

    import { Component, OnInit } from "@angular/core";
    import { GcPdfViewer } from '@grapecity/gcpdfviewer';

    @Component({
    selector: 'bh-pdf-viewer',
    templateUrl: 'app/shared/components/pdf-editor/pdf-editor.component.html'
    })
    export class PdfEditorComponent implements OnInit {
    constructor() {

    }

    ngOnInit() {
    let viewer = new GcPdfViewer("#host");

    viewer.addDefaultPanels();
    viewer.newDocument();
    }
    }


    The associated HTML file just has the div tag with the id.

    Any help to get this functioning with Angular and TypeScript would be greatly appreciated as I have so far been unable to find any examples on how to integrate this with Angular and TypeScript.
  • Replied 25 February 2021, 2:51 am EST

    Hi,
    Thank you for reporting this issue. We are able to replicate the issue at our end using the Angular project created using the angular-cli.
    We have forwarded this issue to the concerned team for further investigation with the internal tracking id DOC-2804. We will let you know as we get an update on this.

    Regards,
    Manish Gupta
  • Replied 8 March 2021, 6:30 am EST

    Hi, I was wondering if there has been any progress on this issue?

    Thanks!
  • Replied 8 March 2021, 2:15 pm EST

    Hi Laura,
    We are sorry for the inconvenience of the delayed response. Please do the following to resolve the issue:
    1. Place gcpdfviewer.worker.js in assets folder
    2. Update app.component.ts, set the workerSrc option like this:

      let viewer = new GcPdfViewer("#viewer",{
    workerSrc: '/assets/gcpdfviewer.worker.js',
    userName: 'Anonymous',
    logLevel:'Debug'
    });


    Hope it helps!

    Regards,
    Manish Gupta
  • Replied 10 March 2021, 12:37 am EST

    That worked! Thank you so much for the help with this. However, now I'm coming up against another issue. I've placed a file in our static folder but when the call to viewer.open('StaticFiles/SbaForm1919Rev92020.pdf') is made, I get the following error:

    errors.ts:30 ERROR Error: Uncaught (in promise): InvalidPDFException: Invalid PDF structure
    Error
    at Module.Bsg (gcpdfviewer.js:1)
    at Dsg (gcpdfviewer.js:1)
    at Module.eval (gcpdfviewer.js:1)
    at Module.Bsg (gcpdfviewer.js:1)
    at Dsg (gcpdfviewer.js:1)
    at Object.Bsg (gcpdfviewer.js:1)
    at Dsg (gcpdfviewer.js:1)
    at Object.Bsg (gcpdfviewer.js:1)
    at Dsg (gcpdfviewer.js:1)
    at Object.Bsg (gcpdfviewer.js:1)
    at D (zone.min.js:21)
    at D (zone.min.js:21)
    at zone.min.js:21
    at e.invokeTask (zone.min.js:13)
    at Object.onInvokeTask (ng_zone.ts:293)
    at e.invokeTask (zone.min.js:13)
    at t.runTask (zone.min.js:13)
    at _ (zone.min.js:13)
    at t.invokeTask [as invoke] (zone.min.js:13)
    at _ (zone.min.js:44)


    But if I use the open button and navigate to the exact same file, it opens just fine. Is there something I'm missing that's causing this to fail?

    Also, is there way to use file bytes to open a PDF in the viewer without using the SupportApi project?
  • Marked as Answer

    Replied 10 March 2021, 3:34 pm EST

    Hi Laura,
    We tried to open the PDF without SupportApi and we are able to open the PDF successfully. Please refer to the attached project for reference.

    Regards,
    Manish Gupta
    pdfviewer-openpdf.zip
Need extra support?

Upgrade your support plan and get personal unlimited phone support with our customer engagement team

Learn More

Forum Channels