Блог

Может ли кто-нибудь попробовать это и помочь сделать так, чтобы это работало: https://stackblitz.com/edit/kendo-pdf-viewer-sample-3wk7qg?file=index.html

Оригинальный вопрос для справки:

Я пытаюсь использовать PDFViewer из Kendo UI for jQuery в Angular приложении, которое использует Kendo UI for Angular .

В моем 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>
 

В моем приложении.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,
        });
    }

    ....
}
 

Когда я открыл представление, я увидел, что средство просмотра pdf успешно инициализировано пустой страницей. Но, когда я нажимаю кнопку «Открыть» и выбираю файл pdf, Loading значок отображается бесконечно, а содержимое pdf не отображается.

Не могли бы вы, пожалуйста, рассказать мне, как я могу сделать эту работу, т. Е. Показать содержимое pdf-файла после открытия pdf-файла ? Заранее спасибо.