Headers and Footers

This guide demonstrates how to add and customize headers and footers in your PDF documents.

Basic Headers and Footers

import { EasyPdf, useEasyPdf } from "@easypdf/react";

const BasicHeadersFooters = () => {
  const { pdfRef, downloadPDF } = useEasyPdf();

  return (
    <div>
      <EasyPdf
        ref={pdfRef}
        config={{
          header: {
            height: 60,
            content: (pageNumber, totalPages) => (
              <div className="flex justify-between items-center px-8 py-4 bg-gray-50">
                <img src="/logo.png" alt="Logo" className="h-8" />
                <div className="text-gray-600">
                  Page {pageNumber} of {totalPages}
                </div>
              </div>
            ),
          },
          footer: {
            height: 40,
            content: () => (
              <div className="text-center py-2 text-gray-500 text-sm">
                © 2024 Your Company - All Rights Reserved
              </div>
            ),
          },
        }}
      >
        <div className="p-8">
          <h1 className="text-3xl font-bold mb-6">Document Title</h1>
          <p className="text-gray-700">Your content here...</p>
        </div>
      </EasyPdf>
      <button onClick={downloadPDF}>Download PDF</button>
    </div>
  );
};

Dynamic Headers

const DynamicHeader = () => {
  const { pdfRef, downloadPDF } = useEasyPdf();
  const [documentInfo] = useState({
    title: "Quarterly Report",
    date: new Date().toLocaleDateString(),
    department: "Finance",
  });

  return (
    <div>
      <EasyPdf
        ref={pdfRef}
        config={{
          header: {
            height: 80,
            content: (pageNumber, totalPages) => (
              <div className="px-8 py-4">
                {/* Top Bar */}
                <div className="flex justify-between items-center mb-2">
                  <div className="flex items-center">
                    <img src="/logo.png" alt="Logo" className="h-6 mr-3" />
                    <span className="text-lg font-bold text-gray-800">
                      {documentInfo.title}
                    </span>
                  </div>
                  <div className="text-sm text-gray-600">
                    {documentInfo.date}
                  </div>
                </div>

                {/* Bottom Bar */}
                <div className="flex justify-between items-center text-sm text-gray-600 border-t pt-2">
                  <div>Department: {documentInfo.department}</div>
                  <div>
                    Page {pageNumber} of {totalPages}
                  </div>
                </div>
              </div>
            ),
          },
        }}
      >
        {/* Document content */}
      </EasyPdf>
    </div>
  );
};

Custom Footer with Sections

const CustomFooter = () => {
  const { pdfRef, downloadPDF } = useEasyPdf();

  return (
    <div>
      <EasyPdf
        ref={pdfRef}
        config={{
          footer: {
            height: 60,
            content: (pageNumber, totalPages) => (
              <div className="px-8 py-3 border-t">
                <div className="grid grid-cols-3 gap-4 text-sm text-gray-600">
                  {/* Left Section */}
                  <div>
                    <div className="font-semibold">Contact</div>
                    <div>support@example.com</div>
                  </div>

                  {/* Center Section */}
                  <div className="text-center">
                    <div className="font-semibold">Document Info</div>
                    <div>
                      Page {pageNumber} of {totalPages}
                    </div>
                  </div>

                  {/* Right Section */}
                  <div className="text-right">
                    <div className="font-semibold">Generated</div>
                    <div>{new Date().toLocaleDateString()}</div>
                  </div>
                </div>
              </div>
            ),
          },
        }}
      >
        {/* Document content */}
      </EasyPdf>
    </div>
  );
};

Conditional Headers

const ConditionalHeaders = () => {
  const { pdfRef, downloadPDF } = useEasyPdf();

  return (
    <div>
      <EasyPdf
        ref={pdfRef}
        config={{
          header: {
            height: 60,
            content: (pageNumber, totalPages) => {
              // Skip header on first page
              if (pageNumber === 1) {
                return null;
              }

              return (
                <div className="flex justify-between items-center px-8 py-4 bg-gray-50">
                  <div className="text-gray-600">
                    Continued from page {pageNumber - 1}
                  </div>
                  <div className="text-gray-600">
                    Page {pageNumber} of {totalPages}
                  </div>
                </div>
              );
            },
          },
        }}
      >
        {/* Document content */}
      </EasyPdf>
    </div>
  );
};

Styled Headers with Background

const StyledHeaders = () => {
  const { pdfRef, downloadPDF } = useEasyPdf();

  return (
    <div>
      <EasyPdf
        ref={pdfRef}
        config={{
          header: {
            height: 80,
            content: () => (
              <div className="bg-gradient-to-r from-blue-500 to-purple-500 text-white px-8 py-4">
                <div className="flex justify-between items-center">
                  <div>
                    <h1 className="text-2xl font-bold">Company Name</h1>
                    <p className="text-sm opacity-80">Confidential Document</p>
                  </div>
                  <img src="/logo-white.png" alt="Logo" className="h-12" />
                </div>
              </div>
            ),
          },
          footer: {
            height: 50,
            content: (pageNumber, totalPages) => (
              <div className="bg-gray-800 text-white px-8 py-3">
                <div className="flex justify-between items-center text-sm">
                  <div>© 2024 Company Name</div>
                  <div>
                    Page {pageNumber} of {totalPages}
                  </div>
                </div>
              </div>
            ),
          },
        }}
      >
        {/* Document content */}
      </EasyPdf>
    </div>
  );
};

Best Practices

1. Header Height

   • Keep headers reasonably sized (40-80px recommended)
   • Consider content when setting height
   • Account for different screen sizes

2. Content Placement

   • Use proper margins to avoid content overlap
   • Consider header/footer height in page margins
   • Test with varying content lengths

3. Responsive Design

   • Use flexible layouts
   • Test with different page sizes
   • Consider mobile viewing

4. Performance

   • Optimize images in headers/footers
   • Minimize complex calculations
   • Cache dynamic content when possible

Related

• Basic Usage
• Custom Styling
• Watermarks