Reading and Encoding a PDF

In the browser, encoding a PDF starts with a File object from a file input or drag-and-drop. A FileReader reads the file as an ArrayBuffer, which is then converted to a Base64 string. For production use, a Promise-based wrapper around this flow integrates better with async code.

Size Considerations

PDFs vary enormously in size. A simple one-page form might be 50KB; a rich technical document might be 10MB. Base64 adds 33% overhead. Sending large Base64-encoded PDFs in API request bodies can hit server-side body size limits and slow down API responses significantly.

Embedding PDFs in JSON APIs

Some APIs accept Base64-encoded files in JSON payloads for convenience: {"filename":"report.pdf","content_type":"application/pdf","data":"JVBERi0x..."}. This works well for small files but is inefficient at scale. Consider multipart form uploads for files over ~1MB.

Data URIs for PDF Embedding

PDF data URIs (data:application/pdf;base64,...) can display PDFs inline in HTML using an iframe or object element. The trade-off is page load size — a large embedded PDF will significantly increase time to interactive.

Key Takeaway

Base64 PDF encoding works well for small files in API payloads. For larger documents, use dedicated file upload endpoints to avoid size limits and performance degradation.