1 Answer, 1 is accepted
Hello Dide,
Thank you for reaching out to us.
The PDF Viewer is not available in the KendoReact suite, but it is in our planning and you can follow its progress in the link below:
The target release date is Jan 15, 2023.
Best
Regards,
Konstantin Dikov
Progress Telerik
Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.
Rank 2
Iron
Iron
Thanks for your quick reply! I will keep an eye on the progress.
For now, is there a way I can use the Kendo UI for jquery PDF viewer in my react app?
Rank 2
Iron
Iron
I've added the following but getting the error:
pdfjsLib.GlobalWorkerOptions.workerSrc = `https://cdnjs.cloudflare.com/ajax/libs/pdf.js/${pdfjsLib.version}/pdf.worker.js`;
export default class KendoPdf extends Component {
kendoPDFViewerInstance: any;
componentDidMount() {
if (typeof window !== 'undefined') {
this.kendoPDFViewerInstance = $('#pdfviewer').kendoPDFViewer({
pdfjsProcessing: {
file: '/test-doc.pdf',
},
});
}
}
componentWillUnmount() {
this.kendoPDFViewerInstance.destroy();
$('#pdfviewer').empty();
}
render() {
return (
<div>
<p>pdfviewer</p>
<div id="pdfviewer"></div>
</div>
);
}
}
Hi Dide,
I have tested the scenario and it seems that the error in question can be observed if the PdfViewer is initialized before the PDF.JS scripts are loaded.
Loading the scripts directly seems to resolve the problem:
<head>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/themes/5.8.0/default/default-ocean-blue.css"></link>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2022.3.913/styles/kendo.default-ocean-blue.min.css" />
<script src="https://kendo.cdn.telerik.com/2022.3.913/js/jquery.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2022.3.913/js/kendo.all.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.2.2/pdf.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.2.2/pdf.worker.js"></script>
</head>And here is an example:
Please give this a try and let me know if everything is working correctly on your side too.
Rank 2
Iron
Iron