Question

我正在React中下载一个pdf文件，我想在pdf中添加表格。但是，我无法做到这一点。我正在使用react-pdf库，但无法获得所需的结果。

import {
  Table,
  TableBody,
  TableHeader,
  TableHeaderColumn,
  TableRow,
  TableRowColumn,
  } from 'material-ui/Table';

 <Document>
              <Page style={styles.body}>
            <Text style={styles.header} fixed>

            </Text>

            <Table>
  <TableHeader>
    <TableRow>
     <TableHeaderColumn>ID</TableHeaderColumn>
     <TableHeaderColumn>Name</TableHeaderColumn>
     <TableHeaderColumn>Status</TableHeaderColumn>
  </TableRow>
</TableHeader>
 <TableBody>
  <TableRow>
    <TableRowColumn>1</TableRowColumn>
    <TableRowColumn>John Smith</TableRowColumn>
    <TableRowColumn>Employed</TableRowColumn>
  </TableRow>
</TableBody>
</Table>

Answer 1

如果下载pdf，则

React-pdf库不支持任何其他组件。如果您想不止一次使用表，则可以创建自己的组件表，例如here

<Page style={styles.page} size="A4" wrap>
    <View style={styles.table}>
          <View style={[styles.row, styles.header]}>
              <Text style={[styles.headerText, styles.cell]}>Column 1 Header</Text>
              <Text style={[styles.headerText, styles.cell]}>Column 2 Header</Text>
              <Text style={[styles.headerText, styles.cell]}>Column 3 Header</Text>
              <Text style={[styles.headerText, styles.cell]}>Column 4 Header</Text>
          </View>
          <View style={[styles.row]}>
            <Text style={[styles.cell]}>Column 1 Row 1</Text>
            <Text style={[styles.cell]}>Column 2 Row 1</Text>
            <Text style={[styles.cell]}>Column 3 Row 1</Text>
            <Text style={[styles.cell]}>Column 4 Row 1</Text>
          </View>
    </View>
</Page>

或者如果您需要更多动态数据，

const styles = StyleSheet.create({
    em:{
    fontStyle: 'bold'
}, 
table: {
    width: '100%',
    borderWidth: 2,
    display: 'flex',
    flexDirection: 'column',
    marginVertical: 12
},
tableRow:{
    display: 'flex',
    flexDirection: 'row',
},
cell: {
    borderWidth: 1,
    display: 'flex',
    justifyContent: 'center',
    alignContent: 'center',
    textAlign: 'center',
    flexWrap: 'wrap'
}
    })   

    const Table = ({children, col, th}) => (
        <View style={styles.table}>
            {children.map((row, ind) =>
                <View key={ind} style={[styles.tableRow, th && ind === 0 ? styles.em: {}]}>
                    {row.map((cell, j) =>
                        <View key={j} style={[styles.cell, {width:col[j], height: 40}]}>
                            {
                                typeof(cell) === 'string' || typeof(cell) === 'number' ? 
                                <Text>{cell}</Text> : cell
                            }
                        </View>
                    )}
                </View>
            )}
        </View>
    )

//using like this
<Table
    th
    col={['20%', '60%', '20%']}
    children={[
      ['TH1', 'TH2, 'TH3'],
      ['1', '2', '3'],
      ['4', '5', 6'],
      ['7', '8', '9']
    ]} />

有什么办法可以在“ react-pdf”中添加表格？

1 个答案: