Question

由于react-pdf库提供了一些有限的组件，并且不允许html标签在reactpdfrenderer中呈现，所以我很难使用该库制作表格吗？谁能帮助我如何使用此react-pdf库组件创建表？

Answer 1

您可以像@David-Kucsai 在评论中所说的那样使用 @david.kucsai/react-pdf-table

或不使用

小例子

数据

const data = {
  id: "5df3180a09ea16dc4b95f910",
  items: [
    {
      sr: 1,
      desc: "desc1",
      xyz: 5
    },
    {
      sr 2,
      desc: "desc2",
      xyz: 6
    }
  ],
};

app.js

import React, { Component, Fragment } from 'react';
import {PDFViewer} from '@react-pdf/renderer'
import Table from './components/reports/Table'
import data from './data'


class App extends Component {
  render() {
    return (
        <Fragment>
            <PDFViewer width="1000" height="600">
                <Table data={data}/>
            </PDFViewer>
        </Fragment>
    );
  }
}

export default App;

Table.js

import React from 'react';
import { Page, Document, StyleSheet } from '@react-pdf/renderer';
import ItemsTable from './ItemsTable'


const styles = StyleSheet.create({
    page: {
        fontSize: 11,
        flexDirection: 'column',
    }
  });
  
  const Table = ({data}) => (
            <Document>
                <Page size="A4" style={styles.page}>
                    // ...
                    <ItemsTable data={data} />
                    // ...
                </Page>
            </Document>
        );
  
  export default Table

ItemsTable.js

import React from 'react';
import {View, StyleSheet } from '@react-pdf/renderer';


const styles = StyleSheet.create({
    tableContainer: {
        flexDirection: 'row',
        flexWrap: 'wrap'
    },
});

  const ItemsTable = ({data}) => (
    <View style={styles.tableContainer}>
        {/*<TableHeader />*/}
        <TableRow items={data.items} />
        {/*<TableFooter items={data.items} />*/}
    </View>
  );
  
  export default ItemsTable

TableRow.js

import React, {Fragment} from 'react';
import {Text, View, StyleSheet } from '@react-pdf/renderer';


const styles = StyleSheet.create({
    row: {
        flexDirection: 'row',
        alignItems: 'center',
    },
    description: {
        width: '60%',
    },
    xyz: {
        width: '40%',
    }
  });


const TableRow = ({items}) => {
    const rows = items.map( item => 
        <View style={styles.row} key={item.sr.toString()}>
            <Text style={styles.description}>{item.desc}</Text>
            <Text style={styles.xyz}>{item.xyz}</Text>
        </View>
    )
    return (<Fragment>{rows}</Fragment> )
};
  
export default TableRow

欲了解更多信息，请查看 Generate Dynamic PDF Invoices Using React and React-PDF

如何使用react-pdf库创建表格以生成pdf报告？

1 个答案: