JSFiddle - React, Tailwind, and code Playground

by suhail

HTML

<link href="//cdn.syncfusion.com/ej2/ej2-base/styles/material.css" rel="stylesheet">
    <link href="//cdn.syncfusion.com/ej2/ej2-pdfviewer/styles/material.css" rel="stylesheet">
    <link href="//cdn.syncfusion.com/ej2/ej2-buttons/styles/material.css" rel="stylesheet">
    <link href="//cdn.syncfusion.com/ej2/ej2-popups/styles/material.css" rel="stylesheet">
    <link href="//cdn.syncfusion.com/ej2/ej2-navigations/styles/material.css" rel="stylesheet">
    <link href="//cdn.syncfusion.com/ej2/ej2-dropdowns/styles/material.css" rel="stylesheet">
    <link href="//cdn.syncfusion.com/ej2/ej2-lists/styles/material.css" rel="stylesheet">
    <link href="//cdn.syncfusion.com/ej2/ej2-inputs/styles/material.css" rel="stylesheet">
    <link href="//cdn.syncfusion.com/ej2/ej2-splitbuttons/styles/material.css" rel="stylesheet">

    <!-- Essential JS 2 PDF Viewer's global script -->
    <script src="//cdn.syncfusion.com/ej2/ej2-pdfviewer/dist/global/ej2-pdfviewer.min.js" type="text/javascript"></script>
    <script src="//cdn.syncfusion.com/ej2/dist/ej2.min.js" type="text/javascript"></script>
    <!--element which is going to render-->
    <div id="container">
      <div class="toolabrs">
        toolabrs here
      </div>
      <div id="PdfViewer" style="height:500px;width:100%;">
      </div>
    </div>
    <script>
      // Initialize PDF Viewer component.
      
      

    </script>

    <script>
      var ele = document.getElementById('container');
      if (ele) {
        ele.style.visibility = "visible";
      }

    </script>

JavaScript

var pdfviewer = new ej.pdfviewer.PdfViewer({
  documentPath: "PDF_Succinctly.pdf",
  serviceUrl: 'https://ej2services.syncfusion.com/production/web-services/api/pdfviewer',
  enableToolbar: true,
  enableNavigationToolbar: false,
  enableThumbnail: false

  
});
$('#annotate').on('click', function() {
  console.log("sdfds");
  pdfviewer.toolbar.showAnnotationToolbar(true);
});


ej.pdfviewer.PdfViewer.Inject(ej.pdfviewer.Toolbar, ej.pdfviewer.Annotation, ej.pdfviewer.Magnification);
//PDF Viewer control rendering starts
pdfviewer.appendTo('#PdfViewer');
pdfviewer.toolbar.showToolbarItem(["MagnificationTool"], true);
pdfviewer.toolbar.showToolbarItem(["OpenOption"],false);
                 pdfviewer.toolbar.showToolbarItem(["PageNavigationTool"],false);
                 pdfviewer.toolbar.showToolbarItem(["PanTool"],false);
                 pdfviewer.toolbar.showToolbarItem(["SelectionTool"],false);
                 pdfviewer.toolbar.showToolbarItem(["SearchOption"],false);
                 pdfviewer.toolbar.showToolbarItem(["PrintOption"],false);
                 pdfviewer.toolbar.showToolbarItem(["DownloadOption"],false);
                  pdfviewer.toolbar.showToolbarItem(["AnnotationEditTool"],false);