时间戳

首页 > 解决方案 > 如何使用 react-pdf 库创建表格以生成 pdf 报告？

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

问题描述

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

标签： reactjsreact-pdf

解决方案

您可以使用@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 发票

推荐阅读