5

I am trying to render HTML inside the <View>/<Text> component while rendering the PDF inside the <PDFViewer> using a Template.

I'd like to render my custom HTML Markup code shown below in my pdf

<p><span style="font-size: 24px;">Pre Interview Notes</span></p><p><br></p><p><strong style="font-size: 14px;"><u>This is a test Pre Interview Notes:</u></strong></p><p><br></p><p><em style="font-size: 14px;">The Guest requires a wheel chair for the show</em></p><p><br></p><p><br></p>

Environment

  • Browser [e.g. Chrome ]:
  • React-PDF version [1.6.8]:
  • React version [e.g. 16.8.6]:
arjun bollam
  • 127
  • 1
  • 10
  • 1
    You will need to parse the HTML markup and re-create the output using the React-PDF components. I'm working on something similar now, except displaying Markdown instead of HTML. I've found the [unified](https://www.npmjs.com/package/unified) library useful for processing the input to a syntax tree. However, I'm having trouble getting inline font styles to work. If I make some more progress I might roll the entire process into a library. – thirdender May 15 '20 at 17:04
  • Any progress on this issu? I'm having the same requirements. – Henrik Clausen Aug 18 '20 at 08:00
  • i'm having same issue - any examples? – S.B Sep 09 '20 at 23:51
  • Same issue here. – hotcakedev Feb 04 '21 at 16:57

2 Answers2

0

i used react-pdf-html and it works.

Mohammad Javad Ghasemy
  • 135
  • 6
-3

You can consider using @react-pdf/renderer, this library is extended from the React-PDF library, visit: https://react-pdf.org/repl?example=breakable-unbreakable for the playground. Hope it helps!

RockLaam
  • 3
  • 4
  • You should consider the question again. He is using the React-PDF renderer as you mentioned, but he was not able to render html tags. – hotcakedev Feb 04 '21 at 16:56