Using the module @react-pdf/renderer
with official example (https://snyk.io/advisor/npm-package/@react-pdf/renderer):
import ReactPDF, { Document, Page, Text, View, StyleSheet } from '@react-pdf/renderer';
// Create styles
const styles = StyleSheet.create({
page: {
flexDirection: 'row',
backgroundColor: '#E4E4E4'
},
section: {
margin: 10,
padding: 10,
flexGrow: 1
}
});
// Create Document Component
const MyDocument = (): JSX.Element => (
<Document>
<Page size="A4" style={styles.page}>
<View style={styles.section}>
<Text>Section #1</Text>
</View>
<View style={styles.section}>
<Text>Section #2</Text>
</View>
</Page>
</Document>
);
ReactPDF.render(<MyDocument />, `example.pdf`);
But I get an error:
Error: render is a Node specific API. You're either using this method in a browser, or your bundler is not loading react-pdf from the appropriate web build.
Please tell me why this error occurred and how I can fix it
The render function only works on the server and react works on the client side, if you want to render in the browser then check the ReactDOM.render function makes use of PDFViewer component.