Checklist to PDF

Create a checklist from simple lines of text and export it as a PDF.

Preview

About Checklist to PDF

This tool turns one checklist item per line into a printable PDF checklist. It is useful for onboarding lists, QA steps, packing lists and recurring work routines.

The checklist is rendered entirely in your browser and exported without any server upload.

How html2canvas Works

html2canvas captures DOM elements by rendering them to an HTML5 canvas:

DOM Parsing: Traverses the DOM tree and computes styles for each element
Canvas Rendering: Draws each element pixel-by-pixel onto a canvas using the Canvas API
CSS Support: Interprets background colors, borders, fonts, and basic CSS properties
Image Export: Exports the canvas as PNG or JPEG data URL
PDF Embedding: Embeds the image data into a jsPDF document with proper page breaks

Custom Checkbox Implementation

<!-- Custom checkbox using styled span -->
<span style="
  display: inline-block;
  width: 18px;
  height: 18px;
  border: 2px solid #6b7280;
  border-radius: 3px;
  background: #ffffff;
"></span>

<!-- Flexbox layout for checkbox + text -->
<li style="
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 10px 0;
">
  [checkbox] [item text]
</li>

Multi-Page PDF Generation

async function downloadPdf() {
  const canvas = await html2canvas(element, { scale: 2 });
  const imageData = canvas.toDataURL("image/png");
  const pdf = new jsPDF("p", "pt", "a4");

  const pageHeight = pdf.internal.pageSize.getHeight();
  const imgHeight = canvas.height * imgWidth / canvas.width;
  let heightLeft = imgHeight;
  let position = 20;

  pdf.addImage(imageData, "PNG", 20, position, imgWidth, imgHeight);
  heightLeft -= pageHeight - 40;

  while (heightLeft > 0) {
    pdf.addPage();
    position = heightLeft - imgHeight + 20;
    pdf.addImage(imageData, "PNG", 20, position, imgWidth, imgHeight);
    heightLeft -= pageHeight - 40;
  }

  pdf.save("checklist.pdf");
}

Common PDF Page Sizes

Size	Dimensions (points)	Dimensions (mm)	Use Case
A4	595 × 842 pt	210 × 297 mm	Standard international documents
Letter	612 × 792 pt	216 × 279 mm	North American standard
A5	420 × 595 pt	148 × 210 mm	Portable checklists, notebooks
Legal	612 × 1008 pt	216 × 356 mm	Legal documents, contracts
Tabloid	792 × 1224 pt	279 × 432 mm	Large formats, posters

Printable Checklist Design Best Practices

Checkbox size: 16-20px square for easy pen/pencil marking
Line spacing: 1.5x font size minimum for readability
Font choice: Sans-serif (Arial, Helvetica) at 11-14pt
Margins: 36-72 points (0.5-1 inch) for binding space
Contrast: High contrast (black text, white background) for photocopying
Section headers: Bold or larger fonts to group related items
White space: Leave room for handwritten notes or annotations

html2canvas Configuration Options

Option	Default	Recommended	Purpose
scale	1	2	Higher DPI for sharper print output
backgroundColor	#ffffff	#ffffff	Ensure white background for printing
useCORS	false	true	Allow cross-origin images if needed
logging	true	false	Disable console spam in production
imageTimeout	15000	15000	Timeout for loading external images

Frequently Asked Questions

How does html2canvas render HTML to PDF?: html2canvas captures DOM elements by rendering them to an HTML5 canvas element. It parses CSS styles, computes layout positions, and draws each element pixel-by-pixel. The canvas is then exported as PNG data and embedded into a jsPDF document. This approach preserves visual fidelity but converts text to images (not searchable text).
What are the limitations of html2canvas vs native PDF generation?: html2canvas produces image-based PDFs where text is not selectable or searchable. Native jsPDF text rendering creates searchable, accessible PDFs with proper text layers. html2canvas excels at preserving complex CSS layouts, checkboxes, and visual styling that would be difficult to recreate with PDF drawing commands alone.
How do you create custom checkboxes in HTML/CSS?: Custom checkboxes use a span or div styled with border and border-radius properties. Example: <span style='display:inline-block;width:18px;height:18px;border:2px solid #6b7280;border-radius:3px'></span>. This approach allows full CSS customization of size, color, and shape compared to default browser checkbox styling.
What PDF page sizes are commonly used for checklists?: A4 (595x842 points) is standard for international documents. Letter (612x792 points) is common in North America. For checklists, consider landscape orientation for wide item lists, or smaller formats like A5 for portable printed checklists. Margins of 36-72 points provide adequate white space for printed annotations.
How do you handle multi-page PDF generation with html2canvas?: When canvas height exceeds page height, calculate remaining content after each page break. Subtract page height from total image height, add new pages with pdf.addPage(), and position subsequent image slices. The loop continues until all content fits. Position tracking ensures seamless visual flow across pages.
What are best practices for printable checklist design?: Use high contrast (dark text on white background), adequate line spacing (1.5x font size), checkbox sizes of 16-20px for easy marking, clear section headings, and leave margin space for handwritten notes. Sans-serif fonts like Arial or Helvetica improve readability at small print sizes. Test print before distribution.