ReactPDF Basic Setup

[@arslan99]

You may experience a webpack issue when you install react-pdf. Since Webpack 5 isn't included in node automatically you can follow these steps in the react-pdf docs to help resolve the issue. github.com/diegomura/react-pdf#webpack-5

[@johngeronimo8821]

can you teach us how to add this webpack dependencies because I'm getting an error

[@arslan99]

I'm ngl I couldn't figure it out myself the docs themselves show that you have to do something with webpack in nodemodules but I found installing a previous version of webpack is a better solution imo

[@farukeomar4354]

@@arslan99 where is the webpack.config file ? can not find in react app.

[@farukeomar4354]

@@johngeronimo8821 r u able to use this?

[@johngeronimo8821]

@@farukeomar4354 unfortunately, it's impossible for me

[@phamtuankietk17hcm92]

Very usefull, I have find this download article for 3-4 hour and then I find u. Thank u so much

[@arslan99]

Glad I could help

[@devjariwala.j]

same here

[@devjariwala.j]

life saving video loved the last part of downloading

[@arslan99]

I'm glad I could help;

[@ahmedyousif4782]

exactly what I was searching for, thank you !

[@AnitaR-q5l]

Thank you very much.. This is what I actually searching for.

[@arslan99]

Glad I could help!

[@hanac5586]

Thanks, brief but clear

[@arslan99]

Np

[@mdborhanuddinmajumder7513]

thanks and love from bangladesh

[@arslan99]

Thanks for watching 🫡

[@igihara2662]

is there way to do it with dynamic data i.e. pass data from a selected/clicked table?

[@NashIvan19]

Very helpful.

[@pedrohenriqueferreira629]

Hi Arslan, I am an student and I am practicing on how generate pdf files from react. Thanks for the video it is was very helpful. Would you have any reference on how to create columns? or columns inside columns using react-pdf? Also, how could I find your next video? Many thanks man. You are inspiring people!

[@arslan99]

Hey there, That is a bit more advanced but there are great examples on codesandbox on how to make a chart with a table Here's the link to part 2 kzbin.info/www/bejne/Y5DLg4p4pcZ9kM0

[@pedrohenriqueferreira629]

@@arslan99 Thanks a lot Arslan! I will play around with it and see the possibilities. Thanks again

[@madhurjyagogoi5353]

what extension are you using for autosuggestion ? is it tabnine or another?

[@arslan99]

GitHub copilot

[@abeasta7674]

thank for the video. It was useful 👍

[@arslan99]

Glad it was helpful!

[@kevindejesuslopezosorio4517]

Hello, thanks for the information I'm trying to do this in my app, but it's showing an error in the "" component:" and read properties of undefined (reading 'call') at new Queue

[@MauricioPedrodaRocha]

mine is also on it, I had to install it using --force, because it says that the react version is too advanced for a lib without support for the new version

[@arslan99]

yes there seems to be a weird error with react pdf I'll try to see if i can make a video to fix this issue

[@sravanimamidala2356]

Is it useful to replace the existing content in the pdf ?

[@vognercee]

Hello Arsian, Thank you for your video. My need is to view an existing pdf file - no image or text - in React. Can your process be adapted for this purpose?

[@arslan99]

Do you mean a pdf viewer in your react app?

[@vognercee]

@@arslan99 Yes. I resolved the issue with react-pdf. Thank you for the response.

[@Osmanity]

I also was in need to view an existing pdf file, how did you solve it @vogner

[@juryhc]

Hi Arslan, this tutorial is great, but I have a query: Is it possible to add a background image to each generated page? I have tried to do it with different properties but nothing has worked for me. I hope you can help me, regards.

[@arslan99]

It should be possible Lemme see what I can do

[@juryhernandez9160]

@@arslan99 thank you, i trust you

[@arslan99]

kzbin.info/www/bejne/l3K3f5R6aNdniNU that should help

[@prajwal1341]

thanks bro..

[@mutiaraayun6062]

i try your video and implement using next.js 14 but some how image not show when i'm using components image in react-pdf also path of image using local. any suggestion for my problem

[@SonAyoD]

i cant figure out how to add dynamic data i can map through via react pdf components. e.g. {item.data} doesn't work.

[@arslan99]

I assume you'd have to make the map inside the text tag instead of item.data

[@SonAyoD]

Thanks for replying. For example i have this... const { rightEye, LeftEye } = useContext(DataContext); const age = rightEye.age; return ( {age} ) i've tried {rightEye.age} to with no luck value updates on app re-renders, which didn't work, so i went with the above that didn't work either.

[@arslan99]

Theres two way i can think of try this. 1. {this.state.data.map((item,i) => Test)} or 2. this.state.data.map((item,i) => {item} ) Thats my best guess without actually interacting with the code

[@SonAyoD]

@@arslan99 thank you i found a solution .

[@arslan99]

@@SonAyoD awesome! 😃

[@priyan6380]

Hey! Thanks for sharing this! Do you have any idea about how I could capture scrollable content into pdf?

[@arslan99]

one way I guess you could do it, is by putting it all in a react pdf list tag and that should help

[@Nicojpalacio]

Thank u bro!

[@arslan99]

Np

[@rohanthakran4225]

Sir i am trying to this but i don;t know the image is showing on the page but when i open the pdf after download there was no image

[@arslan99]

how are you displaying your image? in your pdf?

[@sushantw834]

Thank you.

[@arslan99]

Np

[@mubeenjutt28]

I need this, thanks

[@arslan99]

Glad I'm could lend a hand

[@samandasalazar4523]

Hi, I'm having this issue RangeError: Failed to construct 'TextDecoder': The encoding label provided ('utf-16le') is invalid.

[@arslan99]

Unfortunately I'm not too sure what that means sorry

[@tiptrcks3960]

Hey bro I have resume component with lots of tailwind styling etc, I want to somehow export that as pdf, but no like an image inside a pdf, I saw this approach but its tedious cause I have 5 to 6 various types of templates with different styling…. Can you help?

[@shorifulislam923]

thanks a lot

[@arslan99]

Np bro

[@reacticity]

is it possible to download the existing page?

[@arslan99]

Sorry what do you mean existing page?

[@reacticity]

@@arslan99 you did it to other component. What if i have a blog page and a download button in the same blog page. When i click the button the, the blogs will be download as pdf. If there is any way, could you please suggest me anything?

[@arslan99]

So you mean you want to download something directly on the webpage?

[@judygerhold7378]

Thanks alot

[@CasriWare]

does this work on electron js?

[@arslan99]

Funny enough I'm actually learning electron so I can duplicate this tutorial onto that for you soon

[@msea5654]

is there a way to display pdf from remote database , especially if there are received as blob ?

[@arslan99]

Not too sure I understand what you mean. Could you elaborate?

[@msea5654]

@@arslan99 sure thing , first thank you for taking time to respond , what i mean is i am fetch a pdf file from a database , when i receive the file ( which is in blob format) , i managed to read it through (window.open(URL.createObjectURL(my_blob)) all this without react-pdf then when i am trying to display it using react-pdf by using component i cant seem to find a way to fill the "file" property of this component which it is necessary because it is the pdf file itself . I hope i was clearn enough , if i have any misconception feel free to correct me and thank you in advance.

[@arslan99]

@@msea5654 I've actually never delt with making a blob back into a pdf but this may help stackoverflow.com/questions/62575805/convert-blob-to-pdf-file

[@b2c_org_bd]

will this work now? I installed react using vite

[@arslan99]

Not too sure about vite I've never used it before

[@SimonFabcic]

If you are facing with issue "Module not found: Error: Can't resolve 'fs'", try this: In 'package.json' add: "dependencies": { "@react-pdf/renderer": "^3.3.3", }, "pnpm": { "overrides": { "@react-pdf/image": "2.2.3", "@react-pdf/pdfkit": "3.0.4" } }, And run 'npm i' - for reinstalling dependencies Happy hacking ;)

[@VanshChavda-b2v]

I have to pass pure html is that possible?

[@SiddarthMenon-h8q]

I think this solution wont work with a vite react app but works fine with Create react app

[@Yusuffaruq-c4y]

Sir when i click on the download button it is not giving me any result

[@arslan99]

What's your code looking like?

[@Yusuffaruq-c4y]

Sir I tried it again and it works. But when I click on the download button it's not showing loading before displaying the pdf.

[@efilacchione]

How can I convert any react component with dymanic content to a PDF blob. Is that even possible with this library?

[@arslan99]

Well you can make a use call back that changes the blob depending on the dynamic content

[@farukeomar4354]

can not install this package , error shown ,but why

[@arslan99]

Please refer to my pinned comment it shows how to solve it

[@radubogdan5725]

i get this error: "Attempted import error: 'create' is not exported from 'fontkit' (imported as 'fontkit')."... Anyone got a solution? nothing i found on google works for me

[@arslan99]

I don't think I used fontkit however I have a advanced react pdf tutorial on my channel you can check it about font changes

[@radubogdan5725]

@@arslan99 thanks for reply! My problem was because of some dependencies :)

[@arslan99]

@@radubogdan5725 I'm glad you got it 😁

[@thelatelateshowwithmaaz6260]

Sir plz help me iam in a big trouble because When downloading pdf it is saying check your internet connection and try again please help sir

[@arslan99]

Is your internet not connected? Your browser seems or your computer seems not to be connected

[@thelatelateshowwithmaaz6260]

@@arslan99 Sir i dont know whoever uses my web application even in my localhost when i click on PDFDownloadLink Button i starts download but when i see in my download it get failed with error message "Check your internet connection"

[@arslan99]

@@thelatelateshowwithmaaz6260 I'm not entirely sure on that case because check internet connection error usually comes from the browser saying you have not connected to wifi but other than that I'm not too sure sorry

[@thelatelateshowwithmaaz6260]

​@@arslan99 Sir if you can give your instagram i can send you error images Hope this will be helpful for both of us Sir

[@arslan99]

@@thelatelateshowwithmaaz6260 I'm sorry I cannot give personal info if you wanna create a Pastebin or something and put the images there I can view them from there

[@parthdesai1703]

Can you link the video url to send the pdf to email that you mention at the end of the video?

[@arslan99]

kzbin.info/www/bejne/Y5DLg4p4pcZ9kM0

[@sphoorthys7983]

The download button is getting disappeared. I am not getting where i went wrong

[@arslan99]

You're teranary operater could be wrong 🤔

[@anaepeot]

how can I make the pdf not download and just only show it on the browser?

[@arslan99]

stackoverflow.com/questions/45596329/display-pdf-in-reactjs this should help

[@thotchs4116]

Is this libraly support utf-8 just like Thai font ?

[@arslan99]

I'm not sure

[@thotchs4116]

​@@arslan99 thanks arslan

[@alihasanli620]

Hello Arslan, I have prepared a report with normal html css and react without using react-pdf. How can I convert that report to pdf without losing quality? I used the html2canvas and jsPdf libraries but the quality decreased.

[@arslan99]

How come you don't want to use react pdf? I'm a bit confused haha

[@eltonsantosoficial]

Work with next too?

[@arslan99]

It should but not entirely sure

[@arekarksinski3488]

in github you have different things and I can't see that you import pdffile anywhere

[@arslan99]

I think I must've deleted it you can just fork it and import it 😃

[@crushed_oreos]

@@arslan99 i added a pull request with your original code, you can take a look and merge it if you want :)

[@arslan99]

@@crushed_oreosoh wow that's awesome! I'll check it out thanks!

[@j.villasmil9575]

Hello Arslan, I see you couldn't set the page number on each page, I have the same problem, only show it at the end of the entire document

[@CODE-ze7oe]

How to create table ?

[@arslan99]

Lemme see what I can do for you

[@fakhrialfatah7678]

hi bro i install the package but, Module not found: Error: Can't resolve 'react-pdf/renderer' how to solve it

[@arslan99]

You have two options, either delete your node modules and reinstall your node modules or reinstall react pdf

[@fakhrialfatah7678]

@@arslan99 I've done both, it's still the same

[@arslan99]

@@fakhrialfatah7678 oh try installing an earlier version of react pdf

[@kevindejesuslopezosorio4517]

@@arslan99 what version would it be?

[@arslan99]

I would suggest going through the versions and finding an older version with a pretty substantial amount of downloads

[@jayeshuramanatti7632]

is this react js or react native??

[@arslan99]

React js

[@annemieknieboer8221]

Do you now how to get it work with react18.2.0? I can't install it now :(

[@arslan99]

unfortunetly it seems like it wont work since it's peer dependency is at react 17 you could try --force when you install it. however it can be dangerous but thats a way to fix the issue

[@kacperkepinski4990]

i dont know what is your version of react... i have some problem with that pdf

[@arslan99]

its the most recent but what issue do you have?

[@kacperkepinski4990]

@@arslan99 webpack < 5 used to include polyfills for node.js core modules by default.

[@kacperkepinski4990]

solved

[@arslan99]

@@kacperkepinski4990 Im glad you got it 😃

[@funnycutest2043]

@@kacperkepinski4990 how did you solve that error

[@1emnL]

LeGoat

[@adeeltechedit6760]

Helo arslan Can you please tell me about the suggestion you getting when you was writing code

[@arslan99]

That's called GitHub copilot

[@adeeltechedit6760]

@@arslan99 thnks alot ❤

[@arslan99]

@@adeeltechedit6760 you're welcome 😁

[@mustafa.celiktas]

T H A N K Y O U U U U ❤

[@arslan99]

Np

[@shreepowar867]

thank you so much this helped me lot have you uploaded next vdo?

[@arslan99]

Not yet, it's a longer video so the production is taking sometime 😅

[@shreepowar867]

when you are going to upload it?

[@shreepowar867]

i want horzontal line in my pdf how should i do it

[@arslan99]

Not to sure yet maybe throw l tomorrow or Friday

[@arslan99]

If I remember correctly it was

[@sureshsuthar790]

getting page blank........

[@arslan99]

what is your error in your console say?

[@SandeepKunaparaju-r9g]

Thanks Arslan for making this video. It helped me big time but when I opened the downloaded pdf file it said the file got corrupted. I am trying to it figure it out. If anyone else also facing the issue please do let me know

[@arslan99]

Hmmm there could be something wrong with your generating of your pdf

[@HanLok420]

got the same problem. But I forgot to return the PDF-file in the const of the PDF-file.js maybe you did the same. const PDFFile =()=>{ return ....

[@SandeepKunaparaju-r9g]

yes you are right I forgot to update the issue has been resolved when I used return@@HanLok420 Thanks!!!

[@emersonsmithperu]

Error webpack 5. :(

[@arslan99]

Please refer to this github.com/diegomura/react-pdf#webpack-5

[@farukeomar4354]

so can u share video part 2. where u showing how send pdf file to someone email?

[@arslan99]

kzbin.info/www/bejne/Y5DLg4p4pcZ9kM0

[@farukeomar4354]

When we click download button, that time i want to send this pdf to a email address Before click download button i will give email address in input field So how can done this, ? If u have time can make a video for us?

[@amatir-tutor2421]

How to create table

[@arslan99]

not too sure

[@anushabezzam2157]

Can't resolve './zlib_bindings' in 'D: eact epo\LaterEntryUI\LaterEntryUI ode_modules\zlib\lib' getting this error.can anyone solve this

[@arslan99]

try re installing the package or re install your ndoe modeuls

[@chaithanyasuraj7049]

Hi Can you please say how do I display images in my pdf using react pdf renderer

[@arslan99]

react-pdf.org/svg This should help

[@claudiamarcela1101]

Se puede colocar ese PDFDownloadLink dentro del onclick?

[@arslan99]

is this what you mean? stackoverflow.com/a/66768020

[@unlimitedpower5986]

Hello Arslan, Thank you for uploading this video! Can I ask please how to make Hyperlinks (jump to page)?

[@unlimitedpower5986]

Just found it! Thank you for your amazing work!

[@arslan99]

I'm glad you got it 😁

[@arslan99]

And this is also what you've tried? stackoverflow.com/a/70577891 If that doesn't work then I will make a tutorial on it for you

[@unlimitedpower5986]

@@arslan99 Tried it with ttf, woff from local folder and google fonts link too but nothing. I don't know what can be the problem. To test it I used the example link from the docs working on - android: brave - mac: safari not working on - pc: brave, chrome, firefox, edge - mac: brave if the tutorial you mentioned covers the solution for this, I'd be more than grateful :D

[@arslan99]

@@unlimitedpower5986 Lemme see what I can do

[@blueandraedevera6605]

Anyone have tried to use it on iOS? The PDFDownloadLink button doesn't work, it only displays the page instead of downloading the PDF file. Anyone has a solution for this? I'm using the latest version of it.

[@arslan99]

www.npmjs.com/package/react-native-pdf you could use something like this

[@waleednaseem8571]

bro getting error while importing the react-pdf library

[@arslan99]

What's the error?

[@rohanthakran4225]

How to pass props into this

[@arslan99]

this should help sorry for the late response github.com/wojtekmaj/react-pdf/issues/308#issuecomment-443538284

[@kamalsharma8626]

how to use with redux?

[@arslan99]

I'm not too sure. I've never used redux before 😕

[@kamalsharma8626]

@@arslan99 any idea?

[@yugandharsarath3197]

Pdf is not downloading

[@arslan99]

What error are you getting?

[@yugandharsarath3197]

@@arslan99 no error, but onclick of download button is not responding , the file is not downloading ... But When refreshes it is showing loading ....

[@arslan99]

@@yugandharsarath3197 try cloning the repo and comparing the app.js files to see if there could a typo in your code?

[@farukeomar4354]

i used this way but it always showing loading . can not able download the pdf.. plz help me out {({loading}) => loading ? loading : 'Download now!' }

[@arslan99]

Put the loading where the download button is and put the download button where the loadings

[@farukeomar4354]

@@arslan99 so what will happend always show download, but the problem is, button r not working, pdf not being download

[@arslan99]

@@farukeomar4354 what does your pdf download function look like?

[@farukeomar4354]

@@arslan99 i did same way as u shown, as documentation said. This package is not working like before. For solving webpack need to use craco When use craco the can not install tailwind This packeage is dead

[@arslan99]

@@farukeomar4354 oh really 😱 okay I'll try to make an update video. Friggin webpack 😤😤

[@kacperkepinski4990]

is using incorrect casing

[@arslan99]

Sorry 😭

[@kacperkepinski4990]

@@arslan99 is using incorrect casing , did you have that?

[@arslan99]

@@kacperkepinski4990 try doing Text instead of TEXT

[@kacperkepinski4990]

@@arslan99 i dont have something like TEXT etc

[@arslan99]

@@kacperkepinski4990 have you installed the package and imported the tags?

[@rakeshreddy1365]

ERROR in ./node_modules/@react-pdf/pdfkit/lib/pdfkit.browser.es.js 2:0-28 Module not found: Error: Can't resolve 'stream' in '/home/sbuidev/workspace/atom/sre-dashboard/node_modules/@react-pdf/pdfkit/lib' BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default. This is no longer the case. Verify if you need this module and configure a polyfill for it.

[@boneclinkz5663]

can u send this generated pdf to an email?

[@arslan99]

kzbin.info/www/bejne/Y5DLg4p4pcZ9kM0 this sound help

[@boneclinkz5663]

Billion Thanks! @Arslan you just got a new subscriber here dx

[@arslan99]

@@boneclinkz5663 np glad I could help

[@davon_news]

Hello, nice video mate, i was implementing it on my project but appears me this 5 errors take a look please, how i can solve this .... : Compiled with problems:X ERROR in ./node_modules/@react-pdf/pdfkit/lib/pdfkit.browser.es.js 2:0-28 Module not found: Error: Can't resolve 'stream' in 'C:\Users\User\zehlendorf-alfaversion ode_modules\@react-pdf\pdfkit\lib' BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default. This is no longer the case. Verify if you need this module and configure a polyfill for it. If you want to include a polyfill, you need to: - add a fallback 'resolve.fallback: { "stream": require.resolve("stream-browserify") }' - install 'stream-browserify' If you don't want to include a polyfill, you can use an empty module like this: resolve.fallback: { "stream": false } ERROR in ./node_modules/@react-pdf/pdfkit/lib/pdfkit.browser.es.js 4:0-24 Module not found: Error: Can't resolve 'zlib' in 'C:\Users\User\zehlendorf-alfaversion ode_modules\@react-pdf\pdfkit\lib' BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default. This is no longer the case. Verify if you need this module and configure a polyfill for it. If you want to include a polyfill, you need to: - add a fallback 'resolve.fallback: { "zlib": require.resolve("browserify-zlib") }' - install 'browserify-zlib' If you don't want to include a polyfill, you can use an empty module like this: resolve.fallback: { "zlib": false } ERROR in ./node_modules/@react-pdf/png-js/lib/png-js.browser.es.js 1:0-24 Module not found: Error: Can't resolve 'zlib' in 'C:\Users\User\zehlendorf-alfaversion ode_modules\@react-pdf\png-js\lib' BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default. This is no longer the case. Verify if you need this module and configure a polyfill for it. If you want to include a polyfill, you need to: - add a fallback 'resolve.fallback: { "zlib": require.resolve("browserify-zlib") }' - install 'browserify-zlib' If you don't want to include a polyfill, you can use an empty module like this: resolve.fallback: { "zlib": false } ERROR in ./node_modules/blob-stream/index.js 1:21-47 Module not found: Error: Can't resolve 'stream' in 'C:\Users\User\zehlendorf-alfaversion ode_modules\blob-stream' BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default. This is no longer the case. Verify if you need this module and configure a polyfill for it. If you want to include a polyfill, you need to: - add a fallback 'resolve.fallback: { "stream": require.resolve("stream-browserify") }' - install 'stream-browserify' If you don't want to include a polyfill, you can use an empty module like this: resolve.fallback: { "stream": false } ERROR in ./node_modules/restructure/src/EncodeStream.js 23:11-28 Module not found: Error: Can't resolve 'stream' in 'C:\Users\User\zehlendorf-alfaversion ode_modules estructure\src' BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default. This is no longer the case. Verify if you need this module and configure a polyfill for it. If you want to include a polyfill, you need to: - add a fallback 'resolve.fallback: { "stream": require.resolve("stream-browserify") }' - install 'stream-browserify' If you don't want to include a polyfill, you can use an empty module like this: resolve.fallback: { "stream": false }

[@arslan99]

Yeah it's a problem with webpack, this link should help you github.com/diegomura/react-pdf#webpack-5

[@davon_news]

@@arslan99 thanks a lot dude, the thing is that they ask me to modify the webpack.config but i don't have access to it, do you think that i sould use "npm run eject ​" to edit it?

[@arslan99]

I think the the webpack.config file is in node_modules try googling where is webpack.config in node_modulea

[@johngeronimo8821]

@@davon_news its on node_modules/react-scripts

[@davon_news]

@@johngeronimo8821 This is the kind of community i'm proud to belong 👌

[@kacperkepinski4990]

haradly hear u

[@arslan99]

Sorry my mic is Dookie haha

[@darwinquinones5397]

Thank you so much. I was having an error and I solved it by watching his video: kzbin.info/www/bejne/j4uzZqVtit6SmLc error: Module not found: Error: Can't resolve 'react-pdf/renderer'

[@arslan99]

Glad you got it!