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

Question

由于 react-pdf 库提供了一些有限的组件，并且不允许在 reactpdfrenderer 中呈现 html 标签。所以我在使用这个库制作表格时遇到了麻烦？谁能帮助我如何使用这个 react-pdf 库组件创建一个表格？

Answer 1

您可以使用@David-Kucsai 在评论中告诉@david.kucsai/react-pdf-table

或不使用

例子

Data

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";
import TableRow from "./TableRow";

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;

有关更多信息，请查看使用 React 和 React-PDF 生成动态 PDF 发票

Answer 2

感谢 Yash 提供的详细答案。这是我在看到您的示例后最终创建的。

创建“表格”的主要技巧是在每一行上使用固定宽度的列。

注意width: '100%'：如果您想让您的行加起来超过 100% 而不会溢出/增长父容器，请创建父容器（在这种情况下为表）。我仍然建议您尝试将总宽度增加到 100%，但下面的示例显示了其他情况。

import { StyleSheet, Text, View } from '@react-pdf/renderer'
import PropTypes from 'prop-types'

const styles = StyleSheet.create({
  table: {
    width: '100%',
  },
  row: {
    display: 'flex',
    flexDirection: 'row',
    borderTop: '1px solid #EEE',
    paddingTop: 8,
    paddingBottom: 8,
  },
  header: {
    borderTop: 'none',
  },
  bold: {
    fontWeight: 'bold',
  },
  // So Declarative and unDRY 
  row1: {
    width: '27%',
  },
  row2: {
    width: '15%',
  },
  row3: {
    width: '15%',
  },
  row4: {
    width: '20%',
  },
  row5: {
    width: '27%',
  },
})

const ReportTable = ({ data, maximumDays }) => {
  return (
    <View style={styles.table}>
      <View style={[styles.row, styles.bold, styles.header]}>
        <Text style={styles.row1}>Name</Text>
        <Text style={styles.row2}>Start Date</Text>
        <Text style={styles.row3}>End Date</Text>
        <Text style={styles.row4}>Days</Text>
        <Text style={styles.row5}>Info</Text>
      </View>
      {data.map((row, i) => (
        <View key={i} style={styles.row} wrap={false}>
          <Text style={styles.row1}>
            <Text style={styles.bold}>{row.lastName}</Text>, {row.firstName}
          </Text>
          <Text style={styles.row2}>{row.startDate}</Text>
          <Text style={styles.row3}>{row.endDate}</Text>
          <Text style={styles.row4}>
            <Text style={styles.bold}>{row.days}</Text> of{' '}
            {maximumDays}
          </Text>
          <Text style={styles.row5}>{row.info}</Text>
        </View>
      ))}
    </View>
  )
}

ReportTable.propTypes = {
  data: PropTypes.array.isRequired,
  maximumDays: PropTypes.number.isRequired,
}

export default ReportTable