Gecko [ gandhischool.edu.np ]

/ var / www / html / lms-client / app / ui / [ HOME SHELL ]

Name	Size	Permission	Action
Alert.tsx	2.75 KB	-rw-rw-r--
DynamicInput.tsx	5.14 KB	-rw-rw-r--
Image.tsx	545 B	-rw-rw-r--
Message.tsx	527 B	-rw-rw-r--
Pagination.tsx	3.49 KB	-rw-rw-r--
Pdf.tsx	3.28 KB	-rw-rw-r--
index.tsx	174 B	-rw-rw-r--
style.css	2.77 KB	-rw-rw-r--

Code Editor : Pdf.tsx

import * as React from 'react';
import Viewer, { Worker,defaultLayout,SpecialZoomLevel,ZoomEvent } from '@phuocng/react-pdf-viewer';
import '@phuocng/react-pdf-viewer/cjs/react-pdf-viewer.css';
import 'assets/css/pdf.css';

const PDF = ({ fileUrl }) => {
  const renderToolbar = (toolbarSlot) => {
      return (
          <div
              style={{
                  alignItems: 'center',
                  display: 'flex',
                  width: '100%',
              }}
          >
              <div
                  style={{
                      alignItems: 'center',
                      display: 'flex',
                      flexGrow: 1,
                      flexShrink: 1,
                      justifyContent: 'center',
                  }}
              >
                  <div style={{ padding: '0 2px' }}>
                      {toolbarSlot.previousPageButton}
                  </div>
                  <div style={{ padding: '0 2px' }}>
                      {toolbarSlot.currentPage + 1} / {toolbarSlot.numPages}
                  </div>
                  <div style={{ padding: '0 2px' }}>
                      {toolbarSlot.nextPageButton}
                  </div>
                  <div style={{ padding: '0 2px' }}>
                      {toolbarSlot.zoomOutButton}
                  </div>
                  <div style={{ padding: '0 2px' }}>
                      {toolbarSlot.zoomPopover}
                  </div>
                  <div style={{ padding: '0 2px' }}>
                      {toolbarSlot.zoomInButton}
                  </div>
                  <div style={{ padding: '0 2px' }}>
                      {toolbarSlot.fullScreenButton}
                  </div>
                  <div style={{ padding: '0 2px' }}>
                      {toolbarSlot.rotateClockwiseButton}
                  </div>
                  <div style={{ padding: '0 2px' }}>
                      {toolbarSlot.rotateCounterclockwiseButton}
                  </div>
                  <div style={{ padding: '0 2px' }}>
                      {toolbarSlot.documentPropertiesButton}
                  </div>
                  <div style={{ padding: '0 2px' }}>
                      {toolbarSlot.handToolButton}
                  </div>
              </div>
          </div>
      );
      
  };
  const layout = (
      isSidebarOpened,
      container,
      main,
      toolbar,
      sidebar,
  ) => {
      return defaultLayout(
          isSidebarOpened,
          container,
          main,
          toolbar(renderToolbar),
          sidebar,
      );
  };

const onZoom = (e: ZoomEvent) => {
      console.log(`Zoom to ${e.scale}`);
  };

return (
    <Worker workerUrl="https://unpkg.com/pdfjs-dist@2.4.456/build/pdf.worker.min.js" >
        <div style={{ height: '900px' }}>
          <Viewer
              fileUrl={fileUrl}
              layout={layout}
              defaultScale={SpecialZoomLevel.PageFit}
              onZoom={onZoom}
          />
     </div> 
    </Worker>
  );

}
// const PDF = props => (
//     <Worker workerUrl="https://unpkg.com/pdfjs-dist@2.4.456/build/pdf.worker.min.js" >
//       <div style={{ height: '750px' }} id={props.file}>
//           <Viewer 
//             fileUrl={props.file} 
//             layout = {layout}
//           />
//       </div> 
//     </Worker>
// );
export default PDF;