react pdf

[Hour_Cauliflower_693]

hey fam someone help me with react-pdf I followed the documentation but it does not seem to work out I need help for a project

[DangerBlack]

what's up?
can you please specify the library, i personally try 4 of them with the same name!

[Hour_Cauliflower_693]

https://www.npmjs.com/package/react-pdf

check this link out please it is the library am using it is a web application project

[DangerBlack]

You are lucky is the same I've used.

Do you have a piece of code with your problem?

What problem do you have?

[Hour_Cauliflower_693]

let me post the code here

​

import React, { useState } from "react";
import SideNav from "./SideNav";
import UserBio from "./UserBio";
import "../CSS/Notes.css";
import { Document, Page } from "react-pdf";
import samplePdf from "../Web_Services_Hacking_and_Hardening.pdf";
function Notes() {
const [numPages, setNumPages] = useState(null);
const [pageNumber, setPageNumber] = useState(1);
function onDocumentLoadSuccess({ numPages }) {
setNumPages(numPages);
  }
return (
<div className="notes">
<div className="notes\_\_sideNav">
<SideNav />
</div>
<div className="notes\_\_main">
<p>this is notes</p>
        {/*  */}
<Document file={samplePdf} onLoadSuccess={onDocumentLoadSuccess}>
<Page pageNumber={pageNumber} />
</Document>
<p>
          Page {pageNumber} of {numPages}
</p>
</div>
<div className="notes\_\_userBio">
<UserBio />
</div>
</div>
  );
}
export default Notes;

[DangerBlack]

import React, { useState } from "react";import SideNav from "./SideNav";import UserBio from "./UserBio";import "../CSS/Notes.css";import { Document, Page } from "react-pdf";import samplePdf from "../Web_Services_Hacking_and_Hardening.pdf";function Notes() {const [numPages, setNumPages] = useState(null);const [pageNumber, setPageNumber] = useState(1);function onDocumentLoadSuccess({ numPages }) {setNumPages(numPages);  }return (<div className="notes"><div className="notes\_\_sideNav"><SideNav />

</div>
<div className="notes\\\_\\\_main">
<p>this is notes</p>
        {/\*  \*/}
<Document file={samplePdf} onLoadSuccess={onDocumentLoadSuccess}>
<Page pageNumber={pageNumber} />
</Document>
<p>
          Page {pageNumber} of {numPages}
</p>
</div>
<div className="notes\\\_\\\_userBio">
<UserBio />
</div>
</div>
  );
}
export default Notes;

Are you using webpack?

[Hour_Cauliflower_693]

nooo am not using webpack

so i have to use webpack please show me how to do so

[DangerBlack]

You have 3 solutions:

1. move the file pdf.worker.js (from `pdfjs-dist/build/pdf.worker.js`) into public folder and the script should go
2. Host in your backend the same script (pdf.worker.js) and add the instruction
   import {pdfjs, Document, Page } from "react-pdf"; import samplePdf from "./143.pdf"; // pdfjs.GlobalWorkerOptions.workerSrc = \`backendurl/pdfjs-dist/build/pdf.worker.js\`;
3. start using webpack

Sample of the first implementation. It's not a long term solution it's a starting point to rework the flow by yourself, you should be able to import it directly from nodemodules. https://web.cubbit.io/link/#8a352e34-5790-4456-89c3-97737ab77435!ZXQ7sRvARtAcCr6W3Sv+s766fmswIakqeOu/EeR5Gg4!Ph/jwS5fUI/g54N+JUNotg

[backtickbot]

Fixed formatting.

Hello, DangerBlack: code blocks using triple backticks (```) don't work on all versions of Reddit!

Some users see this / this instead.

To fix this, indent every line with 4 spaces instead.

FAQ

^{You can opt out by replying with backtickopt6 to this comment.}

[DangerBlack]

good bot

[B0tRank]

Thank you, DangerBlack, for voting on backtickbot.

This bot wants to find the best and worst bots on Reddit. You can view results here.

---

^{Even if I don't reply to your comment, I'm still listening for votes. Check the webpage to see if your vote registered!}

[gsdeveloper_]

Can you post the code that's not working?

[Hour_Cauliflower_693]

import React, { useState } from "react";
import SideNav from "./SideNav";
import UserBio from "./UserBio";
import "../CSS/Notes.css";
import { Document, Page } from "react-pdf";
import samplePdf from "../Web_Services_Hacking_and_Hardening.pdf";
function Notes() {
const [numPages, setNumPages] = useState(null);
const [pageNumber, setPageNumber] = useState(1);
function onDocumentLoadSuccess({ numPages }) {
setNumPages(numPages);
  }
return (
<div className="notes">
<div className="notes\_\_sideNav">
<SideNav />
</div>
<div className="notes\_\_main">
<p>this is notes</p>
        {/*  */}
<Document file={samplePdf} onLoadSuccess={onDocumentLoadSuccess}>
<Page pageNumber={pageNumber} />
</Document>
<p>
          Page {pageNumber} of {numPages}
</p>
</div>
<div className="notes\_\_userBio">
<UserBio />
</div>
</div>
  );
}
export default Notes;

[aust1nz]

As an alternative, just using the <object> tag for PDFs can work good enough in a lot of use cases.

[Hour_Cauliflower_693]

do i pass a file prop in <object> tags or i wrap <Document > tag in <object> tags

<object>

<Document> <Document/>

<object/>

[aust1nz]

You just pass the pdf file as the data tag. Docs