Description
Hi, i'm working on a project in react native windows. I needed the print functionality in my app. So i used react native print library. Did all the configurations as per the documentations . i'm creating the pdf using lib pdf and then printing it using react native print. The print functionality is workng as can bee seen in the snapshot shared but, the page size is maybe overscaled or what , i dont know. I'm sharing my code and snapshot for you people to better understand and guide me. thanks
### My App.js
import React from 'react';
import {View, Button, StyleSheet, Alert} from 'react-native';
import * as RNFS from '@dr.pogodin/react-native-fs';
import {PDFDocument, rgb} from 'pdf-lib';
import RNPrint from 'react-native-print';
import {TemporaryDirectoryPath, writeFile} from '@dr.pogodin/react-native-fs';
import {Buffer} from 'buffer';
const PdfLibPrintExample = () => {
const generatePDFWithPdfLib = async () => {
try {
// 1. Create a new PDF document with explicit A4 size
const pdfDoc = await PDFDocument.create();
// Explicit A4 size (595.28 x 841.89 points)
const page = pdfDoc.addPage([595.28, 841.89]);
const {width, height} = page.getSize();
// Add larger margins
const margin = 72; // 1 inch margin (72 points = 1 inch)
const textWidth = width - margin * 2;
page.drawText('PDF-Lib Test Document, this document is renewed!', {
x: margin,
y: height - margin - 20, // 20 points from top margin
size: 12, // Smaller font size for testing
color: rgb(0, 0, 0),
maxWidth: textWidth,
lineHeight: 14,
});
// 2. Serialize the PDFDocument to bytes
const pdfBytes = await pdfDoc.save();
const filePath = `${TemporaryDirectoryPath}/libPdfDoscs.pdf`;
const base64Pdf = Buffer.from(pdfBytes).toString('base64');
await writeFile(filePath, base64Pdf, 'base64');
console.log('Saving PDF to:', filePath);
Alert.alert(TemporaryDirectoryPath);
// Check if the file actually exists
const exists = await RNFS.exists(filePath);
console.log('File exists:', exists);
const pdfInfo = await RNFS.stat(filePath);
console.log('PDF file size:', pdfInfo.size, 'bytes');
if (exists) {
await RNPrint.print({
filePath: `file://${filePath}`,
// Windows-specific fixes:
scale: 100, // Force exact scaling
disableShrinkToFit: true,
// Add paper size (critical for Windows):
paperSize: {
width: 595.28,
height: 841.89,
margin: {top: 0, left: 0}, // Remove default margins
},
});
} else {
console.error('PDF file not found at path:', filePath);
}
} catch (error) {
console.error('Error generating/printing PDF:', error);
Alert.alert('Error', error.message || 'Something went wrong');
}
};
return (
);
};
export default PdfLibPrintExample;
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
},
});
### Mainpge.xhaml file
<!-- Your existing ReactRootView -->
<react:ReactRootView
x:Name="ReactRootView"
Background="{ThemeResource ApplicationPageBackgroundThemeBrush}"
ComponentName="qaf"
/>
