import React, { useRef } from 'react';
const GraphPaperPDF = () => {
const printRef = useRef();
// Calculate dimensions for A4 paper (210mm × 297mm)
const mmToPx = (mm) => mm * 96 / 25.4; // Convert mm to pixels at 96 DPI
const width = mmToPx(210);
const height = mmToPx(297);
const gridSpacing = mmToPx(5);
// Generate vertical lines
const verticalLines = [];
for (let x = gridSpacing; x < width; x += gridSpacing) {
const strokeWidth = x % mmToPx(10) === 0 ? 0.5 : 0.2;
const strokeColor = x % mmToPx(50) === 0 ? "#888" : "#ccc";
verticalLines.push(
);
}
// Generate horizontal lines
const horizontalLines = [];
for (let y = gridSpacing; y < height; y += gridSpacing) {
const strokeWidth = y % mmToPx(10) === 0 ? 0.5 : 0.2;
const strokeColor = y % mmToPx(50) === 0 ? "#888" : "#ccc";
horizontalLines.push(
);
}
const handlePrint = () => {
const printWindow = window.open('', '_blank');
if (printWindow) {
printWindow.document.write(`
5mm Graph Paper (A4)
${printRef.current.outerHTML}
Press Ctrl+P (or Cmd+P) to print this graph paper.
For accurate 5mm grid:
Choose "Actual Size" in your print dialog
Disable any "Fit to page" options
Choose "No margins" if available
`);
printWindow.document.close();
}
};
const handleDownload = () => {
// In a real-world scenario, we would generate and download a PDF here
// For this demo, we'll just redirect to the print version which can be saved as PDF
handlePrint();
};
return (
5mm Graph Paper (A4)
This is a printer-friendly 5mm grid paper in A4 format (210mm × 297mm). Click the button below to download or print.
Printing Tips:
For accurate 5mm grid spacing, use "Actual Size" in print settings
Turn off "Scale to Fit" or similar options
PDF created with precise measurements for A4 paper (210mm × 297mm)