如何用 react-pdf 中的一张图像填充整个页面？

Question

我正在尝试在我的 reactjs Web 应用程序中使用 react-pdf 将一个 pdf 页面制作为一个 base64 图像。

我已经尝试了所有我知道的将图像制作为 A4 尺寸的方法 图像并完全填充图像，使一张图像在 react-pdf 中作为一整页出现

我尝试过宽度：100%，高度：100%，对象填充，尝试增加尺寸。 但到目前为止我没有成功。 现在，图像位于中心，并没有到达页面的所有角落。

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>
        )
    }
}

预期输出：使用 react-pdf 将一张图像作为 pdf 中的一页出现。

实际结果：一张图片使用 react-pdf 出现在页面中间，并且在所有四个边都有很大的边距

非常感谢您的帮助。我真的很感激

Answer 1

我想有点晚了，但也许可以帮助其他人。

我认为下面的代码可以解决问题。 我改变了一些东西：

1. 视图元素有填充，我删除了它。
2. 将 objectFit 应用于图像元素，我建议使用“cover”而不是“fill”。

如果这有帮助，请告诉我。

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>
        );
  };
};