How to create a PDF file using React.js

แชร์
ฝัง
  • เผยแพร่เมื่อ 9 พ.ย. 2024

ความคิดเห็น • 57

  • @sahanweerakoon8544
    @sahanweerakoon8544 3 ปีที่แล้ว +22

    Watch from 35:00. Stuff before that are unnecessary
    .

  • @lmd4881
    @lmd4881 3 ปีที่แล้ว +2

    this is SO awesome, have bought you coffee as a thank you :)

    • @VicodeMedia
      @VicodeMedia  3 ปีที่แล้ว

      Thanks a lot, Linda! I'm glad it helped you! :)

  • @sabyasachisahu6730
    @sabyasachisahu6730 3 ปีที่แล้ว +1

    Thank you so much. I have been looking for this for a very long time.

  • @sdkosm
    @sdkosm 2 ปีที่แล้ว

    Amazing bro you did it

  • @mariacarrero8701
    @mariacarrero8701 2 ปีที่แล้ว +1

    Thank you so much!! it works fine in my own project

  • @kdgyimah
    @kdgyimah 4 ปีที่แล้ว +2

    Great tutorial, works just as expected.
    My problem using this package was the generated PDF page was looking pixelated and not so clear than it really was and I couldn't print the full screen like you showed if the page had a lot more content...

    • @vijayverma-ho4hk
      @vijayverma-ho4hk 3 ปีที่แล้ว +2

      Did u get the solution of your problem. please share

    • @kdgyimah
      @kdgyimah 2 ปีที่แล้ว

      @@vijayverma-ho4hk Yes I did.
      Totally sorry about responding late , I just got a reply to one of my comments and I’m only seeing this in addition.
      I used the package “react-to-print”

    • @hasinpramodya9652
      @hasinpramodya9652 2 ปีที่แล้ว

      @@vijayverma-ho4hk I also had same problem but I solved it very simply update my app.css with the given app.css file. So remember to apply CSS given in the code

    • @chandanilama7959
      @chandanilama7959 2 ปีที่แล้ว

      did you solve and how plz response as soon as possible

  • @chandanilama7959
    @chandanilama7959 2 ปีที่แล้ว +1

    how to solve PDF page was looking pixelated and not so clear than it really was and I couldn't print the full screen like you showed if the page had a lot more content...

  • @anmol8193
    @anmol8193 2 ปีที่แล้ว +1

    I tried using this, works fine for a single page, but if the content is more than 1 page, a new page isn't getting added automatically, unable to find a solution, could you please help?

  • @bilalabubaker1009
    @bilalabubaker1009 3 ปีที่แล้ว +2

    what if the content is for 3 to 5 pages ? will it give pdf of 3 to 5 pages ?

  • @galtechenterprises
    @galtechenterprises 2 ปีที่แล้ว

    Sir, How to add multiple pages in react-to-pdf and also make a page break.

  • @shunottarasarade6229
    @shunottarasarade6229 3 ปีที่แล้ว +1

    hello , npm install react-to-pdf is not installing in node modules . How to solve it . please help

  • @johnsonare6452
    @johnsonare6452 4 ปีที่แล้ว +1

    Thanks, Well done

  • @costafabio7072
    @costafabio7072 3 ปีที่แล้ว +1

    Thanks 👏

  • @faisalakram6825
    @faisalakram6825 3 ปีที่แล้ว

    Thankyou so much.

  • @christianmagnus1003
    @christianmagnus1003 3 ปีที่แล้ว +1

    What happens if i want to send this pdf file to backend to save it, how i should send this pdf if i not press pdf create button?

  • @priyan6380
    @priyan6380 2 ปีที่แล้ว

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

  • @ashrutpanchal
    @ashrutpanchal ปีที่แล้ว

    Can we send this pdf in the URL in the API for the back-end side to use/ save?
    If yes, how?

  • @SonAyoD
    @SonAyoD 2 ปีที่แล้ว

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

  • @NguyenNgocThuong-2001
    @NguyenNgocThuong-2001 ปีที่แล้ว

    how to change size print pdf when using react-to-pdf library? I need to print words in A4 size page

  • @dji713
    @dji713 3 ปีที่แล้ว

    Hello, thanks for this tutorial.
    I have a problem: my pdf is generated as an image non pdf type.
    Is it possible that the pdf contains several pages?
    Thank you

  • @salemouail627
    @salemouail627 3 ปีที่แล้ว +1

    Thanks ! :D

  • @kdgyimah
    @kdgyimah 4 ปีที่แล้ว +3

    This is my solution for getting a page as PDF using vanilla JavaScript and no package.
    window.print();}> Capture as PDF
    // This will print the whole page as a PDF
    To prevent the button itself from showing in the PDF file,
    Add this style to your css:
    @media print {
    .dontPrint { display: none !important;}
    }

    • @LeHoangNhatLam
      @LeHoangNhatLam 2 ปีที่แล้ว +1

      This is very useful. Thank you !!!

    • @kdgyimah
      @kdgyimah 2 ปีที่แล้ว +1

      @@LeHoangNhatLam You are welcome!!

  • @kristinajoycegob5555
    @kristinajoycegob5555 3 ปีที่แล้ว +2

    Can this be send as an attachment? Can you make a tutorial pls.

    • @VicodeMedia
      @VicodeMedia  3 ปีที่แล้ว

      Thanks for the feedback. Will do my best to make one.

  • @kshitizshah6685
    @kshitizshah6685 4 ปีที่แล้ว +1

    thanks a lot

  • @khan_dev
    @khan_dev 2 ปีที่แล้ว

    I dont understand how to apply styles for the PDF file.

  • @davidkramer6286
    @davidkramer6286 3 ปีที่แล้ว

    I'm trying to find a way to send genereted pdf to backend so i can save it. If you know how to make that can you plase make tutorial or just tell me how to do it.

  • @kamilpedziach361
    @kamilpedziach361 3 ปีที่แล้ว

    why i see only half of file, first half is behind the screen :d

  • @ghilesabchiche7342
    @ghilesabchiche7342 3 ปีที่แล้ว +1

    Hi, does it also work on components?
    I would like to print only a designed area not all the page
    Great video btw!

    • @SULAIMAN83536
      @SULAIMAN83536 2 ปีที่แล้ว

      Did you solve this? I really need the solution please

  • @meoonlyjb9109
    @meoonlyjb9109 3 ปีที่แล้ว

    Help!!!! I lost information, it does not automatically paging

  • @duvanaponte8590
    @duvanaponte8590 2 ปีที่แล้ว +1

    esta libreria ya no la soporta react---- :(

  • @utopian5920
    @utopian5920 3 ปีที่แล้ว

    how can i add a datepicker to the PDF?

  • @Electrocode_gk
    @Electrocode_gk 2 ปีที่แล้ว

    Is it static or dynamic

  • @deepikasrinivasasharma7481
    @deepikasrinivasasharma7481 4 ปีที่แล้ว

    How to do this in react,jsx file sir?

  • @yulianaquintana9361
    @yulianaquintana9361 2 ปีที่แล้ว

    Why are you still using classes?

  • @Niamat-w9s
    @Niamat-w9s 4 ปีที่แล้ว +1

    thanks

  • @kacperkepinski4990
    @kacperkepinski4990 2 ปีที่แล้ว

    1 big page?

  • @AnitaR-q5l
    @AnitaR-q5l 5 หลายเดือนก่อน

    I am getting this error while submitting the form..
    ------------------------------------------------------------------------------
    Uncaught runtime errors:
    ERROR
    Objects are not valid as a React child (found: [object Promise]). If you meant to render a collection of children, use an array instead.

  • @achinmandotia9837
    @achinmandotia9837 4 ปีที่แล้ว

    This doesn't seem to be working for me, my pdf is coming to be blank

    • @VicodeMedia
      @VicodeMedia  4 ปีที่แล้ว

      Did you try the source code?

    • @achinmandotia9837
      @achinmandotia9837 4 ปีที่แล้ว

      @@VicodeMedia Yes, I cloned your repo and tried running it. No luck

    • @VicodeMedia
      @VicodeMedia  4 ปีที่แล้ว

      And you also installed the packages, right?

    • @achinmandotia9837
      @achinmandotia9837 4 ปีที่แล้ว

      @@VicodeMedia yep, I did yarn install

    • @emys_
      @emys_ 3 ปีที่แล้ว

      @@achinmandotia9837 I added in App.css -> .Post -> color: black;

  • @kacperkepinski4990
    @kacperkepinski4990 9 หลายเดือนก่อน

    40 min? sth is wrong