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

由于react pdf库提供了一些有限的组件，并且不允许在react pdf Frenderer中呈现html标记。所以我在使用该库生成表时遇到了麻烦？

---

有谁能帮助我如何使用这个react pdf库组件创建一个表吗？

正如@David Kucsai在评论中所说的，您可以使用它

或者不使用

小示例

资料

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;

import React，{Component，Fragment}来自'React'；
从“@react pdf/renderer”导入{PDFViewer}
从“./components/reports/Table”导入表
从“./data”导入数据
类应用程序扩展组件{
render（）{
返回(
);
}
}
导出默认应用程序；

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

从“React”导入React；
从'@react pdf/renderer'导入{页面、文档、样式表}；
从“/ItemsTable”导入ItemsTable
const styles=StyleSheet.create({
第页：{
尺寸：11，
flexDirection:'列'，
}
});
常量表=（{data}）=>(
// ...
// ...
);
导出默认表

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

从“React”导入React；
从'@react pdf/renderer'导入{View，StyleSheet}；
const styles=StyleSheet.create({
桌面容器：{
flexDirection:'行'，
flexWrap:“wrap”
},
});
常量ItemsTable=（{data}）=>(
{/**/}
{/**/}
);
导出默认项稳定

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

import React，{Fragment}来自'React'；
从'@react pdf/renderer'导入{Text，View，StyleSheet}；
const styles=StyleSheet.create({
行：{
flexDirection:'行'，
对齐项目：“居中”，
},
说明：{
宽度：“60%”，
},
xyz：{
宽度：“40%”，
}
});
const TableRow=（{items}）=>{
常量行=items.map（item=>
{item.desc}
{item.xyz}
)
返回（{rows}）
};
导出默认表行

---

有关更多信息，请检查

您是否找到了有关问题的解决方案。如果您发现了，请与我们分享我也面临着同样的问题@NayanHi@Moasiz，我编写此库是为了以声明方式呈现react pdf的表。目标是模拟HTML表的声明方式。希望这对您的场景有用，或者提供一种方法来接近react-pdf中的表。Hi@DavidKucsai我安装了这个库，但没有安装。@Moaiz您能在GitHub repo上提出一个问题并提供更多细节吗？我们将看看是否可以解决这个问题。此票据中的两个资源：

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