How to fill an entire page with one image in react-pdf? - html

Question

I am trying to make one pdf page as one base64 image using react-pdf in my reactjs web application.
and I have tried everything that I know of for making the image as an A4 size
image and fill the image completely so that one image comes as one entire page in react-pdf
I have tried width:100%, height:100%, object-fill, tried to increase the size.
but so far I am unsuccessful.
Right now the image comes on center and does not make it to all the corners in the page.
import React, { Component } from 'react'
import ReactPDF, { Page, Text, View, Document, StyleSheet , Font, Image,} from '#react-pdf/renderer';
import pic from "../pics/pic.jpeg"
// Create styles
const styles = StyleSheet.create({
page: {
flexDirection: 'row',
backgroundColor: '#fff',
width:"100%",
orientation:"portrait"
},
image: {
width: '100%',
height:"100%",
padding: 10,
backgroundColor: 'white',
},
});
// Create Document Component
export default class ImageToPDF extends Component {
render() {
return (
<Document >
<Page object-fit="fill" style={styles.page} size="A4">
<View object-fit="fill" style={styles.image}>
<Image object-fit="fill" style={{ padding:"0, 0, 0, 0", margin:"33%, 2rem, 2rem, 2rem",
transform: 'rotate(90deg)'}} src={pic} alt="images" />
</View>
</Page>
</Document>
)
}
}
Expected output: One image comes as one page in the pdf using react-pdf.
Actual result: one image comes in the middle of a page using react-pdf and has a lot of margin on all four sides
Thanks a lot for the help. I really appreciate it

Answer 1

A bit late i guess, but maybe someone else can be helped by this.
I think the code below will do the trick.
I've altered a few things:
The view element had padding, i removed it.
applied objectFit to the image element, I would suggest to use "cover" instead of "fill".
Let me know if this helped.
import React, { Component } from 'react'
import ReactPDF, { Page, Text, View, Document, StyleSheet, Font, Image } from '#react-pdf/renderer';
import pic from "../pics/pic.jpeg"
// Create styles
const styles = StyleSheet.create({
page: {
flexDirection: 'row',
backgroundColor: '#fff',
width: '100%',
orientation: 'portrait',
},
view: {
width: '100%',
height: '100%',
padding: 0,
backgroundColor: 'white',
},
image: {
objectFit: 'cover',
},
});
// Create Document Component
export default class ImageToPDF extends Component {
render() {
return (
<Document >
<Page object-fit="fill" style={styles.page} size="A4">
<View style={styles.view}>
<Image style={styles.image} src={pic} alt="images" />
</View>
</Page>
</Document>
);
};
};