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

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:

1. The view element had padding, i removed it.
2. 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>
        );
  };
};