Тёмный

Create Custom PDF Viewer using React PDF & React Hooks 

Recoding
Подписаться 2,5 тыс.
Просмотров 69 тыс.
50% 1

Опубликовано:

 

22 окт 2024

Поделиться:

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист
Посмотреть позже
Комментарии : 57   
@gray7714
@gray7714 2 года назад
Yes! Finally a quick and easy to follow tutorial on how to do something practical in React/Next.js. Thank you so much for doing this video!
@Recoding
@Recoding 2 года назад
We are glad that this video could help you stay tuned for more interesting contents regarding React and Next.JS.
@farbodAprin
@farbodAprin 2 года назад
Failed to load PDF file. didnt work for me
@ankitthapa445
@ankitthapa445 8 месяцев назад
noob question but how would you integrate the next previous buttons along with auto scroliing?
@fkbey5756
@fkbey5756 2 года назад
can you show, how to preview local pdf files?
@mosespeter9711
@mosespeter9711 2 года назад
You've saved the day!
@webarrays
@webarrays Год назад
please help ./node_modules/react-pdf/dist/esm/entry.webpack.js:3:0 Module not found: Can't resolve 'file-loader'
@MirAnupamHossainAkib--
@MirAnupamHossainAkib-- 2 года назад
thanks. helped me a lot
@Recoding
@Recoding Год назад
Glad it helped!
@jumb0_9
@jumb0_9 Год назад
what version of react did you use? and what version of react-pdf did you use? Please
@emmanuelbudke6499
@emmanuelbudke6499 Год назад
Do I have to press the insert text button? is there a way to lock it so I don't have to press it like every time?
@suvarnarajunallapu7188
@suvarnarajunallapu7188 2 года назад
Hello Recoding!! Is it possible to add Highlighting like markup and adding comments features (like in word doc) to pdf using React? Can you provide the related APIs if possible?
@timtech9361
@timtech9361 2 года назад
Cannot use import statement outside a module??????????????????
@sivasai9734
@sivasai9734 Год назад
How can we select text in the pdf after rendering in it
@PaviThra-pq3he
@PaviThra-pq3he 2 года назад
Mam is that possible to highlight some text using react-pdf can you please share some code
@Recoding
@Recoding 2 года назад
Yes, surely you can highlight text using the custom text renderer attribute inside page components. You can check the documentation regarding that you will get step by solution for that.
@triyoga6899
@triyoga6899 2 года назад
Failed to load PDF file blocked by CORS any solution?
@Recoding
@Recoding 2 года назад
Use node.js or add this project inside any server you will not face this error again.
@abdullhaseeb4157
@abdullhaseeb4157 Год назад
Module not found: Error: Package path ./dist/esm/entry.webpack is not exported from package C:\**\**\**\**\**\upworkproject ode_modules eact-pdf (see exports field in C:\**\**\**\**\**\** ode_modules eact-pdf\package.json) I am getting the above error can somebody please help me with it.
@timotijevicvladimir4870
@timotijevicvladimir4870 11 месяцев назад
Same like me
@webarrays
@webarrays Год назад
i am trying from 4 days no library is working please help somone i am trying to add in next js
@GAneshStudyGAng
@GAneshStudyGAng 2 года назад
Can we generate the new pdf file using React-PDF library?
@MustafaKOSMAZ-ye9nv
@MustafaKOSMAZ-ye9nv Год назад
thanks
@antoniomiguel9447
@antoniomiguel9447 Год назад
I got the error """ Module not found: Can't resolve 'file-loader' "" anyone else ? This module was supposed to be inside the one we added to the project right ?
@anubhav.codess
@anubhav.codess Год назад
yes same how do you resolve it ?
@MarioFlores
@MarioFlores 2 года назад
It doesn't work with external url
@halilpeker8811
@halilpeker8811 Год назад
how to run with url
@webarrays
@webarrays Год назад
./node_modules/react-pdf/dist/esm/entry.webpack.js:3:0 Module not found: Can't resolve 'file-loader'
@reddyvasudevarao2211
@reddyvasudevarao2211 Год назад
Instead of giving static pdf, can we ask user to select the pdf.
@Recoding
@Recoding Год назад
Yes, you can ask user to select the pdf and redirect the link to the page. First you need to create a PDF picker component which will redirect the URL to the PDF viewer component.
@thomasg4967
@thomasg4967 2 года назад
But how do we make the Document responsive?
@abhilashm5236
@abhilashm5236 2 года назад
very informative , can you please make a api call and display the pfd.
@Recoding
@Recoding 2 года назад
Sure, but which API call you saying for like a link from RESTAPI and show the data or some other kind of please mention it also.
@abhilashm5236
@abhilashm5236 2 года назад
Thanks for the very quick response. Eg. I make a GET request and in response I get the pdf. I get the entire pdf in binary.
@insxne__6319
@insxne__6319 Год назад
does this support docs excel etc?
@Recoding
@Recoding Год назад
For that you need to use some different dependencies.
@insxne__6319
@insxne__6319 Год назад
@@Recoding can you please give me some example? i have to diaplay pdf, excel pptx, doc, txt, can i have an example
@Recoding
@Recoding Год назад
You could use react-doc-viewer for opening pptx, doc, txt and other format. Check this out : www.npmjs.com/package/react-doc-viewer
@insxne__6319
@insxne__6319 Год назад
@@Recoding thanks
@insxne__6319
@insxne__6319 Год назад
@@Recoding ive tries to use thia one unfortunately it does not support react 18+
@woynshetbilihatu5998
@woynshetbilihatu5998 2 года назад
Is it possible to make the PDF scroll-able instead of scrolling the entire page?
@tuananhdo1870
@tuananhdo1870 2 года назад
height: 600px, overflow-y: scroll;
@joestard.altair9454
@joestard.altair9454 Год назад
@@tuananhdo1870 where do i put this ?
@subhadeepchowdhury5244
@subhadeepchowdhury5244 Год назад
Yay, now I don't havev to buy some third-pirty solution for PDF viewing.
@kacperkepinski4990
@kacperkepinski4990 2 года назад
module not found
@Recoding
@Recoding 2 года назад
Could you please tell which module you unable to found.
@dulanjalivithanage2291
@dulanjalivithanage2291 2 года назад
interesting..
@NiceChange
@NiceChange Год назад
Warning: getHexString - ignoring invalid character: 104 keep getting this error
@mrbuster3106
@mrbuster3106 2 года назад
Does not work, despite cloning straight from repo. Fix or take down, we need to learn from resources that work.
@Recoding
@Recoding 2 года назад
What's the error you are getting? Please share it we'll fix it.
@abhinavtiwari3226
@abhinavtiwari3226 2 года назад
@@Recoding It is showing PDF file failed to load, in Inspect elemnt it is showing Warning: getHexString - ignoring invalid character in multiple lines
@kacperkepinski4990
@kacperkepinski4990 2 года назад
its 1 big page...
@farfarjam
@farfarjam Год назад
I have done almost all the steps the same as you but I constantly get this error "GET 127.0.0.1:3000/pdf.worker.js 404 (Not Found)" and in my console it says that "Warning: Setting up fake worker." I searched and I found that this problem occurs mostly for external files while I am doing this locally. can anybody give me a hint about it? thank you in advance,
@Recoding
@Recoding Год назад
Please checkout the source code of the video.
@PanosPitsi
@PanosPitsi Год назад
I have ocd please for the love of god commit your repo 🥶🥶
Далее
Generate a PDF in React
23:38
Просмотров 17 тыс.
Наши дети захватили кухню!
00:59
Просмотров 307 тыс.
DIY Pump Solutions
00:18
Просмотров 1,5 млн
#kikakim
00:17
Просмотров 8 млн
Custom Hooks in React (Design Patterns)
12:56
Просмотров 48 тыс.
Runway Just Changed AI Video Forever! Seriously.
9:39
Просмотров 3,7 тыс.
How to Create PDFs With Node JS and React
25:57
Просмотров 147 тыс.
Drag & Drop with Javascript in 4 minutes
3:58
Просмотров 37 тыс.
Render pdf, docx, xlsx, ppt etc. in react application
12:35
ALL React Hooks Explained in 12 Minutes
12:21
Просмотров 144 тыс.
Наши дети захватили кухню!
00:59
Просмотров 307 тыс.