{
  "title": "Printing and export",
  "path": "/patterns/printing",
  "url": "https://design.werklist.com/patterns/printing",
  "text": "https://design.werklist.com/agent/patterns/printing",
  "summary": "How a document, an email conversation or a board leaves WerkOS as a PDF, a printed page or a CSV file.",
  "version": "2.1.2",
  "kind": "pattern",
  "name": "Printing and export",
  "purpose": "Turning a WerkOS item into a PDF, a printed page, a Word file or a CSV that holds the item and nothing of the interface around it.",
  "use": [
    "Download as PDF on a document, a spreadsheet, a knowledge base article or a map.",
    "Printing an email conversation.",
    "Export CSV on a board or an audit log, and Import CSV on a board."
  ],
  "avoid": [
    "Printing a document through the browser's print dialog: the browser adds its own date, address and margins.",
    "A dark surface on paper.",
    "A PDF laid out differently from the printed page of the same item."
  ],
  "anatomy": [
    {
      "part": "Sheet",
      "measure": "A4, 794 by 1123 px at 96 dpi; sheets 26 px apart on screen, touching in the PDF"
    },
    {
      "part": "Margin",
      "measure": "72 px (19 mm) on each side"
    },
    {
      "part": "Running head",
      "measure": "the product name, a vertical bar and the document name; 11 px, 30 px from the top, across the text column"
    },
    {
      "part": "Page number",
      "measure": "30 px from the bottom, at the right edge of the text column, when the export asks for it"
    },
    {
      "part": "Body",
      "measure": "Satoshi 15 px on a line of 1.7; headings at 1.7, 1.35 and 1.12 em",
      "token": "--font-sans"
    },
    {
      "part": "Ink and paper",
      "measure": "near black ink on white, the same in both themes"
    }
  ],
  "states": [
    {
      "name": "Ready",
      "change": "The entry names the result",
      "tokens": []
    },
    {
      "name": "Nothing to export",
      "change": "The entry says why: This board has no rows to export.",
      "tokens": [
        "--text-muted"
      ]
    },
    {
      "name": "Building",
      "change": "The primary button reads Exporting, busy and disabled",
      "tokens": [
        "--brand-true"
      ]
    },
    {
      "name": "Queued",
      "change": "Export queued. It will appear under your exports when ready.",
      "tokens": []
    },
    {
      "name": "Done",
      "change": "Downloaded",
      "tokens": []
    },
    {
      "name": "Failed",
      "change": "One sentence and Try again, and no partial file",
      "tokens": [
        "--error-ink"
      ]
    }
  ],
  "keys": [
    {
      "key": "Enter or Space on an export entry",
      "action": "Starts the export or opens its options dialog"
    },
    {
      "key": "Escape",
      "action": "Closes the export dialog without exporting"
    }
  ],
  "accessibility": [
    "The export button is marked busy while the file builds and keeps its name.",
    "A finished download is announced once.",
    "Printed pages carry the language of the document, so a PDF reader voices it correctly."
  ],
  "content": [
    "Entries name the result: Download as PDF, Download as Word, Print conversation, Export CSV, Export PDF.",
    "Export dialog: Page numbers, Bottom right or None."
  ],
  "rules": [
    "A PDF has the layout the editor shows, so the pages seen before export are the pages of the file.",
    "Paper is white in both themes.",
    "Nothing of the interface prints: no menus, buttons, header or theme.",
    "A printed email leaves out images loaded from the web.",
    "List items may break across sheets. Tables, quotes and code blocks move to the next sheet whole.",
    "CSV export follows the view: its filter, sort, hidden columns and order, with the item name first.",
    "CSV import shows a preview before it writes, lists headers that match no column and cells that break their column's rules, and writes nothing invalid.",
    "A long export runs in the background and appears under your exports when it is ready.",
    "A PDF that cannot be built is an error, not a partial document."
  ],
  "tokens": [
    "--font-sans",
    "--brand-true",
    "--error-ink",
    "--text-muted"
  ]
}