I am going to convert HTML contents to react-pdf tags using react-pdf render in React.
import {
Document,
Page,
View,
Text,
Image,
StyleSheet
} from '@react-pdf/renderer';
const styles = StyleSheet.create({
page: {
backgroundColor: '#fff',
padding: 24
},
h1: {
fontSize: 24,
fontWeight: 500
},
h5: {
fontSize: 12,
fontWeight: 500
},
...
const ProposalPDF = ({ content }) => {
return (
<Document>
<Page size="A4" style={styles.page}>
<View style={styles.header}>
<View>
<Image
source="/static/logo.png"
style={styles.brand}
/>
</View>
<View style={styles.flexAlignRight}>
<Text style={[styles.h1]}>
Title
</Text>
...
I need to add HTML contents to the Document, but they are showing as pure HTML.
What I tried is that I used dangerouslySetInnerHTML inside Text tag.
But it didn't work at all.
<Text style={styles.body1} dangerouslySetInnerHTML={{__html: content }} />
What should I use for displaying html contents as PDF view?
The HTML contents are produced by Quill editor.
So there are some HTML tags including strong, h1, li, p, br, ol, ul, etc.