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.