[Solved] Does KendoReact have a PDF viewer

1 Answer 194 Views

PDF Processing

1 Answer, 1 is accepted

Accepted

Dide

commented on 17 Oct 2022, 08:10 AM

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?

Dide

commented on 17 Oct 2022, 10:38 AM

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>
    );
  }
}

Konstantin Dikov

commented on 19 Oct 2022, 05:39 AM

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:

https://stackblitz.com/edit/react-wzz3cz?file=index.html,app%2Fmain.jsx

Please give this a try and let me know if everything is working correctly on your side too.

Dide

commented on 19 Oct 2022, 09:40 AM

That worked, thanks so much for the help!