Generate PDFs from a template in React Native
PSPDFKit for React Native enables you to generate PDF documents based on templates and custom page configurations.
Predefined Templates
The table below summarizes the predefined list of page templates:
Blank | blank |
Dot 5 mm | dot5mm |
Grid 5 mm | grid5mm |
Line 5 mm | lines5mm |
Line 7 mm | lines7mm |
Image | image |
Additionally, you can customize the following:
-
Page size
-
Page orientation
-
Background color
-
Page margins
Page size
The default page size is A4 format (595 × 841 points). To change this, use the pageSize
property, which is an object with two properties: width
and height
. Both properties are of the number
type and represent the width and height of the page in points.
To customize only one side of the page, specify only the width
or the height
attribute in the configuration:
const configuration = { width: 300, } // Or const configuration = { height: 500, } // Or const configuration = { pageSize: { height: 500, width: 300 } }
Page orientation
The default orientation is portrait, which corresponds to orientation = 0
. To change this, provide one of the following values for the orientation
property — 90
, 180
, or 270
:
const configuration = { orientation: 90, }
Background color
You can specify the background color in different formats. Use the hex
value (#ffffff
), the rgb
value (rgb(255,255,255)
), or the color name (red
):
const configuration = { backgroundColor: '#eeeeee', }
Page margins
Page margins are defined in points. By default, margins are set to {top: 30, right: 15, bottom: 30, left: 15}
. You can customize them by providing a margins
property in the configuration:
const configuration = { {top: 0, right: 15, bottom: 0, left: 15} }
Background images fit into the area defined by the margins.
See the list of all configuration options you can use with Processor
.
To test this functionality, see the demo projects in the Catalog and the NativeCatalog apps.