Next.js Discord

Discord Forum

Generating PDF on the browser

Answered
Polar bear posted this in #help-forum
Open in Discord
Polar bearOP
I need some help with generating a pdf from an html content, the content in Arabic, so it should also be from right to left.
I've spent so much time looking for tools and testing and didn't resolve the issue yet.
Answered by B33fb0n3
Did you tested react-pdf? https://react-pdf.org/
View full answer

32 Replies

Answer
Polar bearOP
yes, it doesn't work very well with arabic characters and alignment
I've tried puppeteer, it works fine with arabic, but it doesn't work on the browser.
And your page does already display everything like expected?
Polar bearOP
yes
@Polar bear yes
what about using window.print()?

--- Edit
Specific parts then can be styled using media queries: https://nextjs-forum.com/post/1333519109962334358#message-1333709327764164628
Polar bearOP
it renders an image, not text
it should be a pdf then, yea
Polar bearOP
it also includes all the webpage, with things that shouldn't be in the document
@B33fb0n3 it should be a pdf then, yea
Polar bearOP
yes
pdf
@B33fb0n3 it should be a pdf then, yea
Polar bearOP
it renders an image inside the pdf I mean
@Polar bear it also includes all the webpage, with things that shouldn't be in the document
you can style specific parts of your app however you want when you use the print media query: (see attached).

One easy fix would be, to hide everything (with *) and only show the specific part that should be visible
@Polar bear is there a way to make it download the pdf directly without asking for name and print settings?
yea, but then I would use react-pdf. That worked for everything until now for me. So yea, it's not perfect but it's a solution
Polar bearOP
OK, thanks for your help.
I have created a button that inserts an HTML span like this <span style="display: inline">some text</span>, after inserting the span, everything is typed after still goes inside the span, I don't want that, how to fix it??
Polar bearOP
Your suggestions is very helpful, but I think I will try to continue to find a better solution.
@Polar bear Your suggestions is very helpful, but I think I will try to continue to find a better solution.
Polar bearOP
because I want the pdf text to be searchable.
@Polar bear because I want the pdf text to be searchable.
Is there anything else that you need, that my solution does not provide yet execpt not searchable text?
@B33fb0n3 Is there anything else that you need, that my solution does not provide yet execpt not searchable text?
Polar bearOP
You did a very helpful work, thank you, but I think the I tried to get an answer from one who did worked with pdfs and arabic content before.
@Polar bear You did a very helpful work, thank you, but I think the I tried to get an answer from one who did worked with pdfs and arabic content before.
Polar bearOP
I thought that there should be a library for exporting pdfs in the browser that handles rtl content.
Can you answer my question? 🙂
@B33fb0n3 Can you answer my question? 🙂
Polar bearOP
I thought I did
Polar bearOP
sorry for the annoying, but I've tried react-pdf one more time, and I'm almost done making it work.
THANKS for the help.