0

Can anyone try this and help making it work: https://stackblitz.com/edit/kendo-pdf-viewer-sample-3wk7qg?file=index.html


Original question for reference:

I'm trying to use PDFViewer from Kendo UI for jQuery in an Angular application that uses Kendo UI for Angular.

In my app.component.html:

<kendo-dialog ... ... >
    ...
    <ng-container .. ... >
            <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2021.2.616/styles/kendo.default-v2.min.css"/>
            <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
            <script src="https://kendo.cdn.telerik.com/2021.2.616/js/kendo.all.min.js"></script>
            <script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.2.2/pdf.js"></script>
            <script>
                    window.pdfjsLib.GlobalWorkerOptions.workerSrc = 'https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.2.2/pdf.worker.js';
            </script>
    ...
        <div #pdfViewer></div>
    </ng-container>
</kendo-dialog>

In my app.component.ts:

import '@progress/kendo-ui';
declare var kendo: any;
...
@Component({
    selector: 'app-view',
    templateUrl: './app.component.html'
})
export class MyAppComponent {
    ...
    @ViewChild('pdfViewer') pdfViewer;
    public pdfViewerContainer;
    ...

    ngAfterViewInit() {
        this.pdfViewerContainer = kendo.jQuery(this.pdfViewer.nativeElement).kendoPDFViewer({
            width: "100%",
            height: 400,
        });
    }

    ....
}

When I open the view, I could see the pdf viewer successfully initialized with a blank page. But, when I click on the Open button and select a pdf file, the Loading icon is shown endlessly and the pdf content is not shown.

Could you please guide me how I can make this work, i.e., show the pdf content after opening the pdf file ? Thanks in advance.

2
  • Here is a sample app to demonstrate this: stackblitz.com/edit/… Can anyone try this, please.
    – che_new
    Commented Aug 16, 2021 at 12:12
  • I tried modifying the code in the link (stackblitz.com/edit/… Added a button in html, on clicking it, a method in the component would be called. In the button click handler, i tried creating the kendo pdf viewer and it worked fine. Is there any way we can ensure that the scripts are loaded properly before initializaiton? Probably, before the method ngAfterViewInit() is called?
    – che_new
    Commented Aug 18, 2021 at 11:00

0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.