@david.kucsai/反应-pdf-表
此库设计用于 @ react-pdf/anderser (英语)。 。 。 .
这个库背后的目标是提供一个在PDF中定义表格的宣示方式.
要开始运行 :
npm install "@david.kucsai/react-pdf-table"
在 Windows 上,您必须逃离 '.' :
npm install "@david`.kucsai/react-pdf-table"
文档
参见 API 文档 用于类型定义.
页:1
- 版式用途
flex幕后传. - 若为
weighting未定义表格单元格,则默认为剩余未分配加权数.weighting应在0.1之间。 最好加起来<= 1。 。 。 .
- 如果有很多行要显示的话,建议把行分批,放在不同的页面上,以确保 价值观没有被切断.
- 内容
TableCell财务报告和审定财务报表DataTableCell必须是评估到string或一个@react-pdf/renderer组件 譬如说.View, (中文(简体) ),Text包括: 如果内容是string它将被包裹Text键. TableCells 和DataTableCells可以覆盖传递给他们的许多配置.
实例
简单示例
此示例将使用默认的样式使一个标题和一行生效 .
<PDFViewer>
<Document>
<Page>
<Table
data={[
{firstName: "John", lastName: "Smith", dob: new Date(2000, 1, 1), country: "Australia", phoneNumber: "xxx-0000-0000"}
]}
>
<TableHeader>
<TableCell>
First Name
</TableCell>
<TableCell>
Last Name
</TableCell>
<TableCell>
DOB
</TableCell>
<TableCell>
Country
</TableCell>
<TableCell>
Phone Number
</TableCell>
</TableHeader>
<TableBody>
<DataTableCell getContent={(r) => r.firstName}/>
<DataTableCell getContent={(r) => r.lastName}/>
<DataTableCell getContent={(r) => r.dob.toLocaleString()}/>
<DataTableCell getContent={(r) => r.country}/>
<DataTableCell getContent={(r) => r.phoneNumber}/>
</TableBody>
</Table>
</Page>
</Document>
</PDFViewer>
格式化示例 - 调整列的文本和加权
此示例将使用默认的样式使一个标题和一行生效 .
<PDFViewer>
<Document>
<Page>
<Table
data={[
{firstName: "John", lastName: "Smith", dob: new Date(2000, 1, 1), country: "Australia", phoneNumber: "xxx-0000-0000"}
]}
>
<TableHeader textAlign={"center"}>
<TableCell weighting={0.3}>
First Name
</TableCell>
<TableCell weighting={0.3}>
Last Name
</TableCell>
<TableCell>
DOB
</TableCell>
<TableCell>
Country
</TableCell>
<TableCell>
Phone Number
</TableCell>
</TableHeader>
<TableBody>
<DataTableCell weighting={0.3} getContent={(r) => r.firstName}/>
<DataTableCell weighting={0.3} getContent={(r) => r.lastName}/>
<DataTableCell getContent={(r) => r.dob.toLocaleString()}/>
<DataTableCell getContent={(r) => r.country}/>
<DataTableCell getContent={(r) => r.phoneNumber}/>
</TableBody>
</Table>
</Page>
</Document>
</PDFViewer>
本地运行
要运行的故事书:
yarn storybook
编译到打字符 :
yarn recompile
构建( 清除和编译 ) :
yarn build
运行测试 :
yarn test