1

我正在尝试使用 react 从我的网页生成 pdf，我有 react-pdf 库，但它没有显示 pdf 文档的全屏，只有 10% 的屏幕显示 pdf。

我导入库

import ReactPDF, { Document, Page, Text, Image, StyleSheet, Font, View, PDFViewer } from '@react-pdf/renderer';

定义我的风格

const styles = StyleSheet.create({
  page: {
    flexDirection: "row"
  },
});

我的文件生成文件

const MyDocument = ({ data }) => (

  <Document>
    <Page size="A4" style={styles.page} wrap={false}>

      <View style={styles.section}>
        <Text style={styles.header} fixed>
          REPORTE
      </Text>

        <Header
          title={format_config.title}
          subtitle={format_config.subtitle}
          logo={data.empresa.logo}
        />

        <View style={styles.table_title}>
          <Text style={styles.subtitle} >
            {format_config.title_tab}
          </Text>
        </View>
        <Ln />


        <View style={styles.table}>
          <View style={styles.tableRow}>
            <View style={styles.tableColHeader}>
              <Text style={styles.tableCellHeader}>COD</Text>
            </View>
            <View style={styles.tableColHeader}>
              <Text style={styles.tableCellHeader}>DESCRIPTION</Text>
            </View>
          </View>


          {
            data.accounts.map((r, i) => {
              return (
                <View style={styles.tableRow} key={i} >
                  <View style={styles.tableColHeader}>
                    <Text style={styles.tableCellHeader}>{r['codigo']} </Text>
                  </View>
                  <View style={styles.tableColHeader}>
                    <Text style={styles.tableCell}>{r['descripcion']} </Text>
                  </View>
                </View>
              )
            })
          }


        </View>


        <Ln />
        <SectionSigns />
        <View style={styles.table_title}>
          <Text style={styles.subtitle} >
            {format_config.text_footer}
          </Text>
        </View>
        <User user={data.user.nombres} />
        <Footer />
        <Date date={data.date} />
      </View>


    </Page>
  </Document>
);

我渲染所有代码以使用此代码生成我的文件。

render() {
    return (
      <div>
        <PDFViewer>
          <MyDocument data={this.state} />
        </PDFViewer>
      </div>
    );
  }

但是在浏览器的显示中，这个文件只显示了 10% 的文档。我有 React JS 和 react-pdf。

4

0 回答 0