Easily generate PDF files from images in React Native.
iOS | Android |
npm install react-native-images-to-pdf
or
yarn add react-native-images-to-pdf
Run pod install
in the ios
directory.
Example using react-native-blob-util
import { createPdf } from 'react-native-images-to-pdf';
import RNBlobUtil from 'react-native-blob-util';
const options = {
pages: [
{ imagePath: '/path/to/image1.jpg' },
{ imagePath: '/path/to/image2.jpg' }
],
outputPath: `file://${RNBlobUtil.fs.dirs.DocumentDir}/file.pdf`,
};
createPdf(options)
.then((path) => console.log(`PDF created successfully: ${path}`))
.catch((error) => console.log(`Failed to create PDF: ${error}`));
This example is using react-native-blob-util
to get a valid outputPath
, but you can choose any other library to achieve the same functionality.
Example using react-native-document-scanner-plugin
import { createPdf } from 'react-native-images-to-pdf';
import DocumentScanner from 'react-native-document-scanner-plugin';
DocumentScanner.scanDocument()
.then(({scannedImages}) => {
if (!scannedImages?.length) {
throw new Error('No images scanned');
}
return createPdf({
pages: scannedImages.map(imagePath => ({ imagePath })),
outputPath: `file:///path/to/output/file.pdf`,
});
})
.then(path => console.log(`PDF created successfully: ${path}`))
.catch(error => console.log(`Failed to create PDF: ${error}`));
Returns a Promise that resolves to a string
representing the output path of the generated PDF file.
Property | Type | Description |
---|---|---|
pages |
Page[] |
Pages that should be included in the PDF. |
outputPath |
string |
The path to the output PDF file. |
Usage | Description | iOS | Android |
---|---|---|---|
file:///absolute/path/to/xxx.pdf |
Save PDF to local file system. | ✓ | ✓ |
Property | Type | Required | Default | Description |
---|---|---|---|---|
imagePath |
string |
✓ | Path to the image file. | |
imageFit |
ImageFit |
'none' |
Image fitting option. Possible values: 'none' , 'fill' , 'contain' , 'cover' . |
|
width |
number |
Image width | Width of the page in pixels. | |
height |
number |
Image height | Height of the page in pixels. | |
backgroundColor |
string |
'white' |
Background color of the page. |
Usage | Description | iOS | Android |
---|---|---|---|
file:///absolute/path/to/image.xxx |
Load image from local file system. | ✓ | ✓ |
data:image/xxx;base64,iVBORw... |
Load image from base64 string. | ✓ | ✓ |
Check the example
folder for a usage demo.
See the contributing guide to learn how to contribute to the repository and the development workflow.
MIT
Made with create-react-native-library