Skip to content

adding pdfVIewer #39

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
thierryKeller-1 wants to merge 1 commit into
base: main
Choose a base branch
from
Open

adding pdfVIewer #39

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
519 changes: 519 additions & 0 deletions package-lock.json
View file
Open in desktop

Large diffs are not rendered by default.

2 changes: 2 additions & 0 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -36,13 +36,15 @@
"@mui/styles": "^5.6.0",
"@mui/x-data-grid": "^5.8.0",
"@pdftron/webviewer": "^8.4.1",
"@react-pdf/renderer": "^2.1.1",
"@testing-library/jest-dom": "^4.2.4",
"@testing-library/react": "^9.3.2",
"@testing-library/user-event": "^7.1.2",
"@themesberg/react-bootstrap": "^1.4.1",
"bootstrap": "5.0.0-beta1",
"chartist": "^0.11.4",
"chartist-plugin-tooltips-updated": "^0.1.4",
"lodash": "^4.17.21",
"material-table": "^2.0.3",
"moment-timezone": "^0.5.31",
"node-sass": "^4.14.1",
Expand Down
0 src/pages/Clients/django.pdf → src/assets/pdf/django.pdf
View file
Open in desktop
File renamed without changes.
1 change: 1 addition & 0 deletions src/pages/Clients/PDFviewer.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@ import { Col, Row, Form, Card, Button, Breadcrumb, InputGroup } from "@themesber
import { faPlus } from "@fortawesome/free-solid-svg-icons";
import { TableClient } from "../../components/TableClient";
import ViewPDF from "./ViewPDF";
// import pdfViewer2 from "./pdfViewer2";

const PDFviewer = () => {
return(
Expand Down
127 changes: 67 additions & 60 deletions src/pages/Clients/ViewPDF.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,74 +1,81 @@
import React, { useState } from 'react';
import { Document, Page,pdfjs } from 'react-pdf';
import pdf from "./django.pdf";
import pdf from "./../../assets/pdf/django.pdf";
import { Col, Row, Form, Card, Button, Breadcrumb, InputGroup } from "@themesberg/react-bootstrap";

const url = pdf

const styles = {
page : {
width : 100
}
};


export default function ViewPDF() {

pdfjs.GlobalWorkerOptions.workerSrc =
`//cdnjs.cloudflare.com/ajax/libs/pdf.js/${pdfjs.version}/pdf.worker.js`;
const [numPages, setNumPages] = useState(null);
const [pageNumber, setPageNumber] = useState(1);
pdfjs.GlobalWorkerOptions.workerSrc =
`//cdnjs.cloudflare.com/ajax/libs/pdf.js/${pdfjs.version}/pdf.worker.js`;
const [numPages, setNumPages] = useState(null);
const [pageNumber, setPageNumber] = useState(1);

/*To Prevent right click on screen*/
document.addEventListener("contextmenu", (event) => {
event.preventDefault();
});
/*When document gets loaded successfully*/
function onDocumentLoadSuccess({ numPages }) {
setNumPages(numPages);
setPageNumber(1);
}
/*To Prevent right click on screen*/
document.addEventListener("contextmenu", (event) => {
event.preventDefault();
});
/*When document gets loaded successfully*/
function onDocumentLoadSuccess({ numPages }) {
setNumPages(numPages);
setPageNumber(1);
}

function changePage(offset) {
setPageNumber(prevPageNumber => prevPageNumber + offset);
}
function changePage(offset) {
setPageNumber(prevPageNumber => prevPageNumber + offset);
}

function previousPage() {
changePage(-1);
}
function previousPage() {
changePage(-1);
}

function nextPage() {
changePage(1);
}
function nextPage() {
changePage(1);
}

return (
<>
<Card className="py-3 h-75">
<div className="justify-content-center overflow-scroll">
<Document
file={url}
onLoadSuccess={onDocumentLoadSuccess}
>
<Page pageNumber={pageNumber} />
</Document>
</div>
return (
<>
<Card className="py-3 h-100">
<div className="overflow-scroll">
<Document
style={{height: "100vh", width: "100vw", display: "flex"}}
file={pdf}
onLoadSuccess={onDocumentLoadSuccess}
>
<Page pageNumber={pageNumber} />
</Document>
</div>

<Row>
<Col>
<div className="d-flex justify-content-center">
Page {pageNumber || (numPages ? 1 : '--')} of {numPages || '--'}
</div>
<div className="d-flex justify-content-center">
<Button
variant="primary"
disabled={pageNumber <= 1}
onClick={previousPage}
className="mx-2"
>Previous</Button>
<Button
className="mx-2"
variant="primary"
disabled={pageNumber >= numPages}
onClick={nextPage}
>Next</Button>
</div>
</Col>
</Row>
</Card>
</>
);
<Row>
<Col>
<div className="d-flex justify-content-center">
Page {pageNumber || (numPages ? 1 : '--')} of {numPages || '--'}
</div>
<div className="d-flex justify-content-center">
<Button
variant="primary"
disabled={pageNumber <= 1}
onClick={previousPage}
className="mx-2"
>Previous</Button>
<Button
className="mx-2"
variant="primary"
disabled={pageNumber >= numPages}
onClick={nextPage}
>Next</Button>
</div>
</Col>
</Row>
</Card>
</>
);
}
59 changes: 59 additions & 0 deletions src/pages/Clients/pdfViewer2.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,59 @@
import React, { PureComponent } from "react";
// import { Document, Page } from "react-pdf";
import throttle from "lodash.throttle";
import pdf from "./django.pdf";
import { Page, Text, View, Document, StyleSheet } from '@react-pdf/renderer';

const styles = StyleSheet.create({
page : {
width : 100
}
});

class pdfViewer2 extends PureComponent {
constructor(props) {
super(props)
this.state = {width: null}
}

componentDidMount () {
this.setDivSize()
window.addEventListener("resize", throttle(this.setDivSize, 500))
}

componentWillUnmount () {
window.removeEventListener("resize", throttle(this.setDivSize, 500))
}

setDivSize = () => {
this.setState({width: this.pdfWrapper.getBoundingClientRect().width})
}

render() {
return (
<div id="row" style={{height: "100vh", width: "100vw", display: "flex", overflow: "hidden"}}>
<div id="placeholderWrapper" style={{width: "10vw", height: "100vh"}}/>
<div id="pdfWrapper" style={{width: "90vw"}} ref={(ref) => this.pdfWrapper = ref}>
<PdfComponent wrapperDivSize={this.state.width} />
</div>
</div>
)
}
}

class PdfComponent extends PureComponent {
render() {
return (
<div>
<Document
style={styles.page}
file={pdf}
>
<Page size="A4" pageIndex={1} width={this.props.wrapperDivSize} />
</Document>
</div>
)
}
}

export default pdfViewer2;
38 changes: 38 additions & 0 deletions src/pages/Documents/PDFviewer.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,38 @@
import React from "react";
import { Link } from "react-router-dom";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faHome, faSearch } from "@fortawesome/free-solid-svg-icons";
import { Col, Row, Form, Card, Button, Breadcrumb, InputGroup } from "@themesberg/react-bootstrap";
import { faPlus } from "@fortawesome/free-solid-svg-icons";
import { TableClient } from "../../components/TableClient";
import ViewPDF from "./viewPDF";


const PDFviewer = () => {
return(
<>
<div className="d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center py-4">
<div className="d-block mb-4 mb-md-0">
<Breadcrumb className="d-none d-md-inline-block" listProps={{ className: "breadcrumb-dark breadcrumb-transparent" }}>
<Breadcrumb.Item>
<Link to="/dashboard/overview">
<FontAwesomeIcon icon={faHome} />
</Link>
</Breadcrumb.Item>
<Breadcrumb.Item>Document</Breadcrumb.Item>
<Breadcrumb.Item>pdfViewer</Breadcrumb.Item>
</Breadcrumb>
<h4>Documents</h4>
</div>
</div>

<Row className="justify-content-center">
<Col md={8}>
<ViewPDF />
</Col>
</Row>
</>
);
};

export default PDFviewer;
120 changes: 99 additions & 21 deletions src/pages/Documents/viewPDF.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,81 @@
import React, { useState } from 'react';
import { Document, Page,pdfjs } from 'react-pdf';
import pdf from "./../../assets/pdf/django.pdf";
import { Col, Row, Form, Card, Button } from "@themesberg/react-bootstrap";



export default function ViewPDF() {

pdfjs.GlobalWorkerOptions.workerSrc =
`//cdnjs.cloudflare.com/ajax/libs/pdf.js/${pdfjs.version}/pdf.worker.js`;
const [numPages, setNumPages] = useState(null);
const [pageNumber, setPageNumber] = useState(1);

/*To Prevent right click on screen*/
document.addEventListener("contextmenu", (event) => {
event.preventDefault();
});

/*When document gets loaded successfully*/
function onDocumentLoadSuccess({ numPages }) {
setNumPages(numPages);
setPageNumber(1);
}

function changePage(offset) {
setPageNumber(prevPageNumber => prevPageNumber + offset);
}

function previousPage() {
changePage(-1);
}

function nextPage() {
changePage(1);
}

return (
<>
<Card className="py-3 h-100">
<div className="overflow-scroll">
<Document
file={pdf}
onLoadSuccess={onDocumentLoadSuccess}
>
<Page pageNumber={pageNumber} />
</Document>
</div>

<Row>
<Col>
<div className="d-flex justify-content-center">
Page {pageNumber || (numPages ? 1 : '--')} of {numPages || '--'}
</div>
<div className="d-flex justify-content-center">
<Button
variant="primary"
disabled={pageNumber <= 1}
onClick={previousPage}
className="mx-2"
>Previous</Button>
<Button
className="mx-2"
variant="primary"
disabled={pageNumber >= numPages}
onClick={nextPage}
>Next</Button>
</div>
</Col>
</Row>
</Card>
</>
);
}




// import React, { Component } from 'react';
// import logger from 'logging-library';
// import FileViewer from 'react-file-viewer';
Expand All @@ -21,30 +99,30 @@
// logger.logError(e, 'error in file-viewer');
// }
// }
import React, { useState } from 'react';
import { Document, Page } from 'react-pdf';
// import React, { useState } from 'react';
// import { Document, Page } from 'react-pdf';

function ViewPDF() {
const [numPages, setNumPages] = useState(null);
const [pageNumber, setPageNumber] = useState(1);
// function ViewPDF() {
// const [numPages, setNumPages] = useState(null);
// const [pageNumber, setPageNumber] = useState(1);

function onDocumentLoadSuccess({ numPages }) {
setNumPages(numPages);
}
// function onDocumentLoadSuccess({ numPages }) {
// setNumPages(numPages);
// }

return (
<div>
<Document
file="../../assets/pdf/Table2.pdf"
onLoadSuccess={onDocumentLoadSuccess}
>
<Page pageNumber={pageNumber} />
</Document>
<p>Page {pageNumber} of {numPages}</p>
</div>
);
}
export default ViewPDF;
// return (
// <div>
// <Document
// file="../../assets/pdf/Table2.pdf"
// onLoadSuccess={onDocumentLoadSuccess}
// >
// <Page pageNumber={pageNumber} />
// </Document>
// <p>Page {pageNumber} of {numPages}</p>
// </div>
// );
// }
// export default ViewPDF;

// import { useEffect, useRef } from 'react';
// import WebViewer from '@pdftron/webviewer'
Expand Down
Loading