diff --git a/package-lock.json b/package-lock.json
index d18f5b7eb96f..95f6b027d3b7 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -11108,6 +11108,14 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/@types/raf": {
+      "version": "3.4.3",
+      "resolved": "https://registry.npmjs.org/@types/raf/-/raf-3.4.3.tgz",
+      "integrity": "sha512-c4YAvMedbPZ5tEyxzQdMoOhhJ4RD3rngZIdwC2/qDN3d7JpEhB6fiBRKVY1lg5B7Wk+uPBjn5f39j1/2MY1oOw==",
+      "dev": true,
+      "license": "MIT",
+      "optional": true
+    },
     "node_modules/@types/range-parser": {
       "version": "1.2.7",
       "resolved": "https://registry.npmjs.org/@types/range-parser/-/range-parser-1.2.7.tgz",
@@ -12625,6 +12633,19 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/atob": {
+      "version": "2.1.2",
+      "resolved": "https://registry.npmjs.org/atob/-/atob-2.1.2.tgz",
+      "integrity": "sha512-Wm6ukoaOGJi/73p/cl2GvLjTI5JM1k/O14isD73YML8StrH/7/lRFgmg8nICZgD3bZZvjwCGxtMOD3wWNAu8cg==",
+      "dev": true,
+      "license": "(MIT OR Apache-2.0)",
+      "bin": {
+        "atob": "bin/atob.js"
+      },
+      "engines": {
+        "node": ">= 4.5.0"
+      }
+    },
     "node_modules/autoprefixer": {
       "version": "10.4.27",
       "resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-10.4.27.tgz",
@@ -12913,6 +12934,17 @@
         "bare-path": "^3.0.0"
       }
     },
+    "node_modules/base64-arraybuffer": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/base64-arraybuffer/-/base64-arraybuffer-1.0.2.tgz",
+      "integrity": "sha512-I3yl4r9QB5ZRY3XuJVEPfc2XhZO6YweFPI+UovAzn+8/hb3oJ6lnysaFcjVpkCPfVWFUDvoZ8kmVDP7WyRtYtQ==",
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "engines": {
+        "node": ">= 0.6.0"
+      }
+    },
     "node_modules/base64-js": {
       "version": "1.5.1",
       "resolved": "https://registry.npmjs.org/base64-js/-/base64-js-1.5.1.tgz",
@@ -13306,6 +13338,19 @@
         "node": "^6 || ^7 || ^8 || ^9 || ^10 || ^11 || ^12 || >=13.7"
       }
     },
+    "node_modules/btoa": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/btoa/-/btoa-1.2.1.tgz",
+      "integrity": "sha512-SB4/MIGlsiVkMcHmT+pSmIPoNDoHg+7cMzmt3Uxt628MTz2487DKSqK/fuhFBrkuqrYv5UCEnACpF4dTFNKc/g==",
+      "dev": true,
+      "license": "(MIT OR Apache-2.0)",
+      "bin": {
+        "btoa": "bin/btoa.js"
+      },
+      "engines": {
+        "node": ">= 0.4.0"
+      }
+    },
     "node_modules/buffer": {
       "version": "6.0.3",
       "resolved": "https://registry.npmjs.org/buffer/-/buffer-6.0.3.tgz",
@@ -13592,6 +13637,27 @@
       ],
       "license": "CC-BY-4.0"
     },
+    "node_modules/canvg": {
+      "version": "3.0.11",
+      "resolved": "https://registry.npmjs.org/canvg/-/canvg-3.0.11.tgz",
+      "integrity": "sha512-5ON+q7jCTgMp9cjpu4Jo6XbvfYwSB2Ow3kzHKfIyJfaCAOHLbdKPQqGKgfED/R5B+3TFFfe8pegYA+b423SRyA==",
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "@babel/runtime": "^7.12.5",
+        "@types/raf": "^3.4.0",
+        "core-js": "^3.8.3",
+        "raf": "^3.4.1",
+        "regenerator-runtime": "^0.13.7",
+        "rgbcolor": "^1.0.1",
+        "stackblur-canvas": "^2.0.0",
+        "svg-pathdata": "^6.0.3"
+      },
+      "engines": {
+        "node": ">=10.0.0"
+      }
+    },
     "node_modules/ccount": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/ccount/-/ccount-2.0.1.tgz",
@@ -14851,6 +14917,17 @@
         "node": ">=4"
       }
     },
+    "node_modules/css-line-break": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/css-line-break/-/css-line-break-2.1.0.tgz",
+      "integrity": "sha512-FHcKFCZcAha3LwfVBhCQbW2nCNbkZXn7KVUJcsT5/P8YmfsVja0FMPJr0B903j/E69HUphKiV9iQArX8SDYA4w==",
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "utrie": "^1.0.2"
+      }
+    },
     "node_modules/css-loader": {
       "version": "6.11.0",
       "resolved": "https://registry.npmjs.org/css-loader/-/css-loader-6.11.0.tgz",
@@ -19604,6 +19681,21 @@
         "node": ">=12"
       }
     },
+    "node_modules/html2canvas": {
+      "version": "1.4.1",
+      "resolved": "https://registry.npmjs.org/html2canvas/-/html2canvas-1.4.1.tgz",
+      "integrity": "sha512-fPU6BHNpsyIhr8yyMpTLLxAbkaK8ArIBcmZIRiBLiDhjeqvXolaEmDGmELFuX9I4xDcaKKcJl+TKZLqruBbmWA==",
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "css-line-break": "^2.1.0",
+        "text-segmentation": "^1.0.3"
+      },
+      "engines": {
+        "node": ">=8.0.0"
+      }
+    },
     "node_modules/htmlparser2": {
       "version": "8.0.2",
       "resolved": "https://registry.npmjs.org/htmlparser2/-/htmlparser2-8.0.2.tgz",
@@ -21114,6 +21206,33 @@
         "node": "*"
       }
     },
+    "node_modules/jspdf": {
+      "version": "2.5.2",
+      "resolved": "https://registry.npmjs.org/jspdf/-/jspdf-2.5.2.tgz",
+      "integrity": "sha512-myeX9c+p7znDWPk0eTrujCzNjT+CXdXyk7YmJq5nD5V7uLLKmSXnlQ/Jn/kuo3X09Op70Apm0rQSnFWyGK8uEQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.23.2",
+        "atob": "^2.1.2",
+        "btoa": "^1.2.1",
+        "fflate": "^0.8.1"
+      },
+      "optionalDependencies": {
+        "canvg": "^3.0.6",
+        "core-js": "^3.6.0",
+        "dompurify": "^2.5.4",
+        "html2canvas": "^1.0.0-rc.5"
+      }
+    },
+    "node_modules/jspdf/node_modules/dompurify": {
+      "version": "2.5.9",
+      "resolved": "https://registry.npmjs.org/dompurify/-/dompurify-2.5.9.tgz",
+      "integrity": "sha512-i6mvVmWN4xo9LrhCOZrDgSs9noW6nOahbrmzjRbPF36YPyj5Ue5lgok0MHDWkG7xzpWFO2OYttXdzM7rJxHvNA==",
+      "dev": true,
+      "license": "(MPL-2.0 OR Apache-2.0)",
+      "optional": true
+    },
     "node_modules/katex": {
       "version": "0.16.44",
       "resolved": "https://registry.npmjs.org/katex/-/katex-0.16.44.tgz",
@@ -25460,6 +25579,14 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/performance-now": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/performance-now/-/performance-now-2.1.0.tgz",
+      "integrity": "sha512-7EAHlyLHI56VEIdK57uwHdHKIaAGbnXPiw0yWbarQZOKaKpvUIgW0jWRVLiatnM+XXlSwsanIBH/hzGMJulMow==",
+      "dev": true,
+      "license": "MIT",
+      "optional": true
+    },
     "node_modules/pg": {
       "version": "8.20.0",
       "resolved": "https://registry.npmjs.org/pg/-/pg-8.20.0.tgz",
@@ -28257,6 +28384,17 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/raf": {
+      "version": "3.4.1",
+      "resolved": "https://registry.npmjs.org/raf/-/raf-3.4.1.tgz",
+      "integrity": "sha512-Sq4CW4QhwOHE8ucn6J34MqtZCeWFP2aQSmrlroYgqAV1PjStIhJXxYuTgUIfkEk7zTLjmIjLmU5q+fbD1NnOJA==",
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "performance-now": "^2.1.0"
+      }
+    },
     "node_modules/railroad-diagrams": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/railroad-diagrams/-/railroad-diagrams-1.0.0.tgz",
@@ -28861,6 +28999,14 @@
         "node": ">=4"
       }
     },
+    "node_modules/regenerator-runtime": {
+      "version": "0.13.11",
+      "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.11.tgz",
+      "integrity": "sha512-kY1AZVr2Ra+t+piVaJ4gxaFaReZVH40AKNo7UCX6W+dEwBo/2oZJzqfuN1qLq1oL45o56cPaTXELwrTh8Fpggg==",
+      "dev": true,
+      "license": "MIT",
+      "optional": true
+    },
     "node_modules/regex": {
       "version": "5.1.1",
       "resolved": "https://registry.npmjs.org/regex/-/regex-5.1.1.tgz",
@@ -29480,6 +29626,17 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/rgbcolor": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/rgbcolor/-/rgbcolor-1.0.1.tgz",
+      "integrity": "sha512-9aZLIrhRaD97sgVhtJOW6ckOEh6/GnvQtdVNfdZ6s67+3/XwLS9lBcQYzEEhYVeUowN7pRzMLsyGhK2i/xvWbw==",
+      "dev": true,
+      "license": "MIT OR SEE LICENSE IN FEEL-FREE.md",
+      "optional": true,
+      "engines": {
+        "node": ">= 0.8.15"
+      }
+    },
     "node_modules/robust-predicates": {
       "version": "3.0.3",
       "resolved": "https://registry.npmjs.org/robust-predicates/-/robust-predicates-3.0.3.tgz",
@@ -30863,6 +31020,17 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/stackblur-canvas": {
+      "version": "2.7.0",
+      "resolved": "https://registry.npmjs.org/stackblur-canvas/-/stackblur-canvas-2.7.0.tgz",
+      "integrity": "sha512-yf7OENo23AGJhBriGx0QivY5JP6Y1HbrrDI6WLt6C5auYZXlQrheoY8hD4ibekFKz1HOfE48Ww8kMWMnJD/zcQ==",
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "engines": {
+        "node": ">=0.1.14"
+      }
+    },
     "node_modules/statuses": {
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/statuses/-/statuses-2.0.2.tgz",
@@ -31713,6 +31881,17 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/svg-pathdata": {
+      "version": "6.0.3",
+      "resolved": "https://registry.npmjs.org/svg-pathdata/-/svg-pathdata-6.0.3.tgz",
+      "integrity": "sha512-qsjeeq5YjBZ5eMdFuUa4ZosMLxgr5RZ+F+Y1OrDhuOCEInRMA3x74XdBtggJcj9kOeInz0WE+LgCPDkZFlBYJw==",
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "engines": {
+        "node": ">=12.0.0"
+      }
+    },
     "node_modules/svgo": {
       "version": "3.3.3",
       "resolved": "https://registry.npmjs.org/svgo/-/svgo-3.3.3.tgz",
@@ -32249,6 +32428,17 @@
         "b4a": "^1.6.4"
       }
     },
+    "node_modules/text-segmentation": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/text-segmentation/-/text-segmentation-1.0.3.tgz",
+      "integrity": "sha512-iOiPUo/BGnZ6+54OsWxZidGCsdU8YbE4PSpdPinp7DeMtUJNJBoJ/ouUSTJjHkh1KntHaltHl/gDs2FC4i5+Nw==",
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "utrie": "^1.0.2"
+      }
+    },
     "node_modules/thenify": {
       "version": "3.3.1",
       "resolved": "https://registry.npmjs.org/thenify/-/thenify-3.3.1.tgz",
@@ -33572,6 +33762,17 @@
         "node": ">= 0.4.0"
       }
     },
+    "node_modules/utrie": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/utrie/-/utrie-1.0.2.tgz",
+      "integrity": "sha512-1MLa5ouZiOmQzUbjbu9VmjLzn1QLXBhwpUa7kdLUQK+KQ5KA9I1vk5U4YHe/X2Ch7PYnJfWuWT+VbuxbGwljhw==",
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "base64-arraybuffer": "^1.0.2"
+      }
+    },
     "node_modules/uuid": {
       "version": "9.0.1",
       "resolved": "https://registry.npmjs.org/uuid/-/uuid-9.0.1.tgz",
@@ -35805,6 +36006,7 @@
         "html-to-image": "^1.11.13",
         "jsdom": "^26.0.0",
         "json-schema": "^0.4.0",
+        "jspdf": "^2.5.2",
         "lucide-svelte": "^0.298.0",
         "luxon": "^3.5.0",
         "marked": "^16.4.0",
diff --git a/web-admin/src/features/dashboards/share/ShareDashboardPopover.svelte b/web-admin/src/features/dashboards/share/ShareDashboardPopover.svelte
index 520d5ccb97b8..b027fe7eaf40 100644
--- a/web-admin/src/features/dashboards/share/ShareDashboardPopover.svelte
+++ b/web-admin/src/features/dashboards/share/ShareDashboardPopover.svelte
@@ -17,13 +17,28 @@
   import Tooltip from "@rilldata/web-common/components/tooltip/Tooltip.svelte";
   import TooltipContent from "@rilldata/web-common/components/tooltip/TooltipContent.svelte";
   import { featureFlags } from "@rilldata/web-common/features/feature-flags";
+  import ExportPdfOptions from "@rilldata/web-common/features/exports/pdf/ExportPdfOptions.svelte";
+  import { exportCanvasPdf } from "@rilldata/web-common/features/exports/pdf/export-canvas-pdf";
+  import type { PdfExportRunOptions } from "@rilldata/web-common/features/exports/pdf/types";
 
   export let createMagicAuthTokens: boolean;
+  // Provide canvas identifiers to enable the "PDF" tab (canvas dashboards only).
+  export let canvasName: string | undefined = undefined;
+  export let instanceId: string | undefined = undefined;
 
   const { hidePublicUrl } = featureFlags;
   let isOpen = false;
   let copied = false;
 
+  $: runPdfExport = ((): ((o: PdfExportRunOptions) => Promise<void>) | null => {
+    if (canvasName && instanceId) {
+      const name = canvasName;
+      const id = instanceId;
+      return (o) => exportCanvasPdf({ canvasName: name, instanceId: id, ...o });
+    }
+    return null;
+  })();
+
   function onCopy() {
     navigator.clipboard.writeText(window.location.href).catch(console.error);
     copied = true;
@@ -50,6 +65,9 @@
         {#if createMagicAuthTokens && !$hidePublicUrl}
           <TabsTrigger value="tab2">Create public URL</TabsTrigger>
         {/if}
+        {#if runPdfExport}
+          <TabsTrigger value="pdf">PDF</TabsTrigger>
+        {/if}
       </TabsList>
       <TabsContent value="tab1" class="mt-0 p-4">
         <div class="flex flex-col gap-y-4">
@@ -77,6 +95,19 @@
           <CreatePublicURLForm />
         {/if}
       </TabsContent>
+      {#if runPdfExport}
+        <TabsContent value="pdf" class="mt-0 p-4">
+          <div class="flex flex-col gap-y-4">
+            <h3 class="text-xs text-fg-primary font-normal">
+              Export this dashboard as a PDF.
+            </h3>
+            <ExportPdfOptions
+              runExport={runPdfExport}
+              onComplete={() => (isOpen = false)}
+            />
+          </div>
+        </TabsContent>
+      {/if}
     </Tabs>
   </PopoverContent>
 </Popover>
diff --git a/web-admin/src/features/projects/ProjectHeader.svelte b/web-admin/src/features/projects/ProjectHeader.svelte
index ac20eea6f990..f6e6b042f9b8 100644
--- a/web-admin/src/features/projects/ProjectHeader.svelte
+++ b/web-admin/src/features/projects/ProjectHeader.svelte
@@ -285,6 +285,8 @@
         <CanvasBookmarks {organization} {project} canvasName={dashboard} />
         <ShareDashboardPopover
           createMagicAuthTokens={projectPermissions.createMagicAuthTokens}
+          canvasName={dashboard}
+          instanceId={runtimeClient.instanceId}
         />
       {/if}
     {/if}
diff --git a/web-common/package.json b/web-common/package.json
index 5463152b988b..bb6c1aafe2e7 100644
--- a/web-common/package.json
+++ b/web-common/package.json
@@ -76,6 +76,7 @@
     "html-to-image": "^1.11.13",
     "jsdom": "^26.0.0",
     "json-schema": "^0.4.0",
+    "jspdf": "^2.5.2",
     "lucide-svelte": "^0.298.0",
     "luxon": "^3.5.0",
     "marked": "^16.4.0",
diff --git a/web-common/src/features/canvas/CanvasDashboardWrapper.svelte b/web-common/src/features/canvas/CanvasDashboardWrapper.svelte
index 1125cfe04ef3..11eea6765d9e 100644
--- a/web-common/src/features/canvas/CanvasDashboardWrapper.svelte
+++ b/web-common/src/features/canvas/CanvasDashboardWrapper.svelte
@@ -6,6 +6,7 @@
   import CanvasFilters from "./filters/CanvasFilters.svelte";
   import { getCanvasStore } from "./state-managers/state-managers";
   import ThemeProvider from "../dashboards/ThemeProvider.svelte";
+  import CanvasPdfExportHeader from "../exports/pdf/CanvasPdfExportHeader.svelte";
 
   const client = useRuntimeClient();
 
@@ -53,6 +54,15 @@
       </header>
     {/if}
 
+    <!-- Off-screen read-only header used only as the PDF capture target. -->
+    <div
+      aria-hidden="true"
+      class="pointer-events-none absolute"
+      style="left: -99999px; top: 0;"
+    >
+      <CanvasPdfExportHeader {canvasName} {instanceId} {maxWidth} />
+    </div>
+
     <div
       role="presentation"
       id="canvas-scroll-container"
diff --git a/web-common/src/features/exports/pdf/CanvasPdfExportHeader.svelte b/web-common/src/features/exports/pdf/CanvasPdfExportHeader.svelte
new file mode 100644
index 000000000000..f6b604a38ff0
--- /dev/null
+++ b/web-common/src/features/exports/pdf/CanvasPdfExportHeader.svelte
@@ -0,0 +1,74 @@
+<script lang="ts">
+  import CanvasFilterChipsReadOnly from "@rilldata/web-common/features/dashboards/filters/CanvasFilterChipsReadOnly.svelte";
+  import { prettyFormatTimeRange } from "@rilldata/web-common/lib/time/ranges/formatter";
+  import { getCanvasStore } from "@rilldata/web-common/features/canvas/state-managers/state-managers";
+
+  // Off-screen, read-only render of the canvas's active time range and filters.
+  // It mirrors the explore "Download as PNG" summary so the PDF capture shows a
+  // static, undistorted filter-bar summary instead of the live interactive bar.
+  // The dashboard title and timestamp are drawn as vector text in assemble.ts.
+  export let canvasName: string;
+  export let instanceId: string;
+  export let maxWidth: number;
+
+  $: ({
+    canvasEntity: {
+      timeManager: {
+        state: {
+          interval: intervalStore,
+          grainStore,
+          timeZoneStore,
+          comparisonIntervalStore,
+          showTimeComparisonStore,
+        },
+      },
+      filterManager: { activeUIFiltersStore },
+    },
+  } = getCanvasStore(canvasName, instanceId));
+
+  $: grain = $grainStore;
+  // Exact, resolved range (e.g. "Jan 1 – Jan 7, 2024"), never the relative alias.
+  $: formattedTimeRange = $intervalStore
+    ? prettyFormatTimeRange($intervalStore, grain)
+    : "";
+  $: formattedComparisonRange =
+    $showTimeComparisonStore && $comparisonIntervalStore
+      ? prettyFormatTimeRange($comparisonIntervalStore, grain)
+      : "";
+
+  // Drop pinned-but-empty filters (interactive affordances with no applied
+  // value); a static PDF should only show filters that actually constrain data.
+  $: uiFilters = {
+    ...$activeUIFiltersStore,
+    dimensionFilters: new Map(
+      [...$activeUIFiltersStore.dimensionFilters].filter(
+        ([, f]) =>
+          (f.selectedValues?.length ?? 0) > 0 ||
+          (!!f.inputText && f.inputText.length > 0),
+      ),
+    ),
+    measureFilters: new Map(
+      [...$activeUIFiltersStore.measureFilters].filter(([, f]) => !!f.filter),
+    ),
+  };
+  $: hasFilters =
+    uiFilters.dimensionFilters.size > 0 || uiFilters.measureFilters.size > 0;
+</script>
+
+<div
+  id="canvas-pdf-export-header"
+  class="flex flex-col gap-y-3 bg-surface-background p-4"
+  style:width="{maxWidth}px"
+>
+  {#if formattedTimeRange}
+    <div class="text-sm text-fg-secondary">
+      {formattedTimeRange}
+      {#if formattedComparisonRange}vs {formattedComparisonRange}{/if}
+      <span class="text-fg-muted">· {$timeZoneStore}</span>
+    </div>
+  {/if}
+
+  {#if hasFilters}
+    <CanvasFilterChipsReadOnly {uiFilters} col={false} />
+  {/if}
+</div>
diff --git a/web-common/src/features/exports/pdf/ExportPdfOptions.svelte b/web-common/src/features/exports/pdf/ExportPdfOptions.svelte
new file mode 100644
index 000000000000..212163a74aa0
--- /dev/null
+++ b/web-common/src/features/exports/pdf/ExportPdfOptions.svelte
@@ -0,0 +1,113 @@
+<script lang="ts">
+  import { Button } from "@rilldata/web-common/components/button";
+  import Checkbox from "@rilldata/web-common/components/forms/Checkbox.svelte";
+  import Select from "@rilldata/web-common/components/forms/Select.svelte";
+  import { eventBus } from "@rilldata/web-common/lib/event-bus/event-bus";
+  import { extractErrorMessage } from "@rilldata/web-common/lib/errors";
+  import type {
+    ExportProgress,
+    PdfExportRunOptions,
+    PdfOrientation,
+    PdfPageFormat,
+  } from "./types";
+
+  // Surface-agnostic PDF export options + action. The caller supplies `runExport`
+  // (bound to the canvas or explore orchestrator), so this form is shared across
+  // the cloud share modal today and the Rill Developer UI in the future.
+  export let runExport: (opts: PdfExportRunOptions) => Promise<void>;
+  export let onComplete: () => void = () => {};
+
+  let includeFilters = true;
+  let format: PdfPageFormat = "a4";
+  let orientation: PdfOrientation = "auto";
+  let tableRowCap = "100";
+
+  let exporting = false;
+  let progressLabel = "Export PDF";
+
+  const PROGRESS_COPY: Record<ExportProgress["phase"], string> = {
+    preparing: "Rendering charts…",
+    capturing: "Capturing dashboard…",
+    assembling: "Building PDF…",
+  };
+
+  async function onExport() {
+    exporting = true;
+    progressLabel = PROGRESS_COPY.preparing;
+    try {
+      await runExport({
+        includeFilters,
+        format,
+        orientation,
+        tableRowCap: Number(tableRowCap),
+        onProgress: ({ phase }) => {
+          progressLabel = PROGRESS_COPY[phase];
+        },
+      });
+      eventBus.emit("notification", {
+        type: "success",
+        message: "Dashboard exported as PDF",
+      });
+      onComplete();
+    } catch (e) {
+      eventBus.emit("notification", {
+        type: "error",
+        message: extractErrorMessage(e) || "Failed to export PDF",
+      });
+    } finally {
+      exporting = false;
+      progressLabel = "Export PDF";
+    }
+  }
+</script>
+
+<div class="flex flex-col gap-y-4">
+  <Checkbox
+    id="pdf-include-filters"
+    bind:checked={includeFilters}
+    label="Include filters"
+  />
+
+  <div class="grid grid-cols-2 gap-x-3">
+    <Select
+      id="pdf-format"
+      label="Page size"
+      bind:value={format}
+      options={[
+        { value: "a4", label: "A4" },
+        { value: "letter", label: "Letter" },
+      ]}
+    />
+    <Select
+      id="pdf-orientation"
+      label="Orientation"
+      bind:value={orientation}
+      options={[
+        { value: "auto", label: "Auto" },
+        { value: "portrait", label: "Portrait" },
+        { value: "landscape", label: "Landscape" },
+      ]}
+    />
+  </div>
+
+  <Select
+    id="pdf-table-rows"
+    label="Table rows"
+    bind:value={tableRowCap}
+    options={[
+      { value: "25", label: "25 rows" },
+      { value: "50", label: "50 rows" },
+      { value: "100", label: "100 rows" },
+      { value: "250", label: "250 rows" },
+    ]}
+  />
+
+  <Button
+    type="primary"
+    loading={exporting}
+    loadingCopy={progressLabel}
+    onClick={onExport}
+  >
+    Export PDF
+  </Button>
+</div>
diff --git a/web-common/src/features/exports/pdf/assemble.ts b/web-common/src/features/exports/pdf/assemble.ts
new file mode 100644
index 000000000000..b0a62e9b6e0f
--- /dev/null
+++ b/web-common/src/features/exports/pdf/assemble.ts
@@ -0,0 +1,151 @@
+import { jsPDF } from "jspdf";
+import type { PaginationResult, Placement } from "./layout";
+
+export interface AssembleMeta {
+  title: string;
+  filename: string;
+  backgroundColor: string;
+  generatedAt: string;
+}
+
+interface RGB {
+  r: number;
+  g: number;
+  b: number;
+}
+
+// Renders the paginated placements into a PDF and triggers a download.
+export async function assemblePdf(
+  result: PaginationResult,
+  meta: AssembleMeta,
+): Promise<void> {
+  const doc = new jsPDF({
+    unit: "pt",
+    format: [result.pageWidthPt, result.pageHeightPt],
+    orientation: result.orientation,
+  });
+  doc.setProperties({ title: meta.title });
+
+  const background = parseColor(meta.backgroundColor) ?? {
+    r: 255,
+    g: 255,
+    b: 255,
+  };
+  const imageCache = new Map<string, HTMLImageElement>();
+
+  for (let page = 0; page < result.pageCount; page++) {
+    if (page > 0) {
+      doc.addPage(
+        [result.pageWidthPt, result.pageHeightPt],
+        result.orientation,
+      );
+    }
+
+    doc.setFillColor(background.r, background.g, background.b);
+    doc.rect(0, 0, result.pageWidthPt, result.pageHeightPt, "F");
+
+    for (const placement of result.placements) {
+      if (placement.page !== page) continue;
+      await drawPlacement(doc, placement, imageCache);
+    }
+
+    // Always stamp the generation time (UTC) in the footer.
+    doc.setFontSize(8);
+    doc.setTextColor(120, 120, 120);
+    doc.text(
+      `Generated ${meta.generatedAt}`,
+      result.marginPt,
+      result.pageHeightPt - 10,
+    );
+  }
+
+  doc.save(meta.filename);
+}
+
+async function drawPlacement(
+  doc: jsPDF,
+  placement: Placement,
+  imageCache: Map<string, HTMLImageElement>,
+): Promise<void> {
+  let dataUrl = placement.block.dataUrl;
+
+  // Sliced blocks: crop the source image to the requested vertical band.
+  if (placement.srcHeightPx !== undefined && placement.srcYPx !== undefined) {
+    const img = await loadImage(placement.block.dataUrl, imageCache);
+    const ratio = img.naturalHeight / placement.block.heightPx;
+    dataUrl = cropImage(
+      img,
+      placement.srcYPx * ratio,
+      placement.srcHeightPx * ratio,
+    );
+  }
+
+  doc.addImage(
+    dataUrl,
+    "JPEG",
+    placement.xPt,
+    placement.yPt,
+    placement.wPt,
+    placement.hPt,
+  );
+
+  if (placement.block.truncatedNote && placement.srcYPx === undefined) {
+    const note = placement.block.truncatedNote;
+    doc.setFontSize(7);
+    doc.setTextColor(120, 120, 120);
+    doc.text(note, placement.xPt + 4, placement.yPt + placement.hPt - 4);
+  }
+}
+
+function loadImage(
+  dataUrl: string,
+  cache: Map<string, HTMLImageElement>,
+): Promise<HTMLImageElement> {
+  const cached = cache.get(dataUrl);
+  if (cached) return Promise.resolve(cached);
+  return new Promise((resolve, reject) => {
+    const img = new Image();
+    img.onload = () => {
+      cache.set(dataUrl, img);
+      resolve(img);
+    };
+    img.onerror = reject;
+    img.src = dataUrl;
+  });
+}
+
+function cropImage(
+  img: HTMLImageElement,
+  srcY: number,
+  srcHeight: number,
+): string {
+  const canvas = document.createElement("canvas");
+  canvas.width = img.naturalWidth;
+  canvas.height = Math.round(srcHeight);
+  const ctx = canvas.getContext("2d");
+  if (!ctx) return img.src;
+  ctx.drawImage(
+    img,
+    0,
+    srcY,
+    img.naturalWidth,
+    srcHeight,
+    0,
+    0,
+    img.naturalWidth,
+    srcHeight,
+  );
+  // Source blocks are already opaque JPEGs, so re-encoding as JPEG is safe and
+  // keeps sliced pages as small as the rest of the document.
+  return canvas.toDataURL("image/jpeg", 0.85);
+}
+
+function parseColor(color: string): RGB | null {
+  const match = color.match(/rgba?\(([^)]+)\)/);
+  if (!match) return null;
+  const parts = match[1].split(",").map((p) => parseFloat(p.trim()));
+  if (parts.length < 3) return null;
+  // Treat a fully transparent background as white (the canvas paints white).
+  if (parts.length >= 4 && parts[3] === 0) return { r: 255, g: 255, b: 255 };
+  return { r: parts[0], g: parts[1], b: parts[2] };
+}
diff --git a/web-common/src/features/exports/pdf/capture.ts b/web-common/src/features/exports/pdf/capture.ts
new file mode 100644
index 000000000000..89493dd976d0
--- /dev/null
+++ b/web-common/src/features/exports/pdf/capture.ts
@@ -0,0 +1,163 @@
+import { toJpeg } from "html-to-image";
+import {
+  FILTER_BAR_ID,
+  FILTER_BAR_ROW_INDEX,
+  type CapturedBlock,
+} from "./types";
+
+// Properties that don't reliably serialize from <svg> subtrees during cloning,
+// so we pin their computed values inline before capture. Mirrors the approach in
+// time-series/ScreenshotContainer.svelte.
+const SVG_PROPS = [
+  "fill",
+  "fill-opacity",
+  "stroke",
+  "stroke-width",
+  "stroke-opacity",
+  "stroke-dasharray",
+  "stroke-linecap",
+  "opacity",
+  "font-family",
+  "font-size",
+  "font-weight",
+  "color",
+];
+
+export function inlineSvgStyles(root: HTMLElement) {
+  root.querySelectorAll("svg, svg *").forEach((el) => {
+    const cs = getComputedStyle(el);
+    const inline = SVG_PROPS.map((p) => `${p}: ${cs.getPropertyValue(p)}`).join(
+      "; ",
+    );
+    el.setAttribute("style", `${inline}; ${el.getAttribute("style") ?? ""}`);
+  });
+}
+
+const PIXEL_RATIO = 2;
+// JPEG keeps PDFs an order of magnitude smaller than lossless PNG while staying
+// crisp for dashboard charts/text. JPEG has no alpha, so we supply a background.
+const JPEG_QUALITY = 0.85;
+
+// Rasterizes a single element to a JPEG data URL.
+export async function rasterizeNode(
+  node: HTMLElement,
+  backgroundColor: string,
+): Promise<string> {
+  inlineSvgStyles(node);
+  return toJpeg(node, {
+    cacheBust: true,
+    pixelRatio: PIXEL_RATIO,
+    quality: JPEG_QUALITY,
+    backgroundColor,
+  });
+}
+
+export interface CaptureResult {
+  blocks: CapturedBlock[];
+  contentWidthPx: number;
+  backgroundColor: string;
+}
+
+export interface CaptureOptions {
+  includeFilters: boolean;
+  truncatedNotes: Map<string, string>;
+  onProgress?: (ratio: number) => void;
+}
+
+// Rasterizes the filter bar (optional) and each canvas component into PNG blocks
+// positioned relative to the canvas content area. Per-block failures degrade to
+// a skipped block rather than aborting the whole export.
+export async function captureCanvasBlocks(
+  opts: CaptureOptions,
+): Promise<CaptureResult> {
+  const scrollContainer = document.querySelector<HTMLElement>(
+    "#canvas-scroll-container",
+  );
+  const rowContainer =
+    scrollContainer?.querySelector<HTMLElement>(".row-container");
+
+  if (!rowContainer) {
+    throw new Error(
+      "Canvas content is not available to export. Make sure all required filters are set.",
+    );
+  }
+
+  const contentRect = rowContainer.getBoundingClientRect();
+  const contentWidthPx = rowContainer.clientWidth;
+  const backgroundColor = scrollContainer
+    ? getComputedStyle(scrollContainer).backgroundColor
+    : "#ffffff";
+
+  const articles = Array.from(
+    rowContainer.querySelectorAll<HTMLElement>("article.component-card"),
+  );
+
+  const blocks: CapturedBlock[] = [];
+  const total = articles.length + (opts.includeFilters ? 1 : 0);
+  let done = 0;
+  const reportProgress = () => opts.onProgress?.(total ? done / total : 1);
+
+  if (opts.includeFilters) {
+    // Read-only summary block (title + exact time range + filter chips),
+    // rendered off-screen specifically for capture; see CanvasPdfExportHeader.
+    const header = document.querySelector<HTMLElement>(
+      "#canvas-pdf-export-header",
+    );
+    if (header) {
+      // Match the header's width to the content area so it scales consistently
+      // with the component blocks during pagination.
+      header.style.width = `${contentWidthPx}px`;
+      if (header.scrollHeight > 0) {
+        try {
+          const dataUrl = await rasterizeNode(header, backgroundColor);
+          blocks.push({
+            id: FILTER_BAR_ID,
+            dataUrl,
+            xPx: 0,
+            yPx: 0,
+            widthPx: contentWidthPx,
+            heightPx: header.scrollHeight,
+            rowIndex: FILTER_BAR_ROW_INDEX,
+          });
+        } catch (e) {
+          console.warn("Failed to capture canvas header for PDF export", e);
+        }
+      }
+    }
+    done += 1;
+    reportProgress();
+  }
+
+  for (const article of articles) {
+    const rect = article.getBoundingClientRect();
+    try {
+      const dataUrl = await rasterizeNode(article, backgroundColor);
+      blocks.push({
+        id: article.id,
+        dataUrl,
+        xPx: rect.left - contentRect.left,
+        yPx: rect.top - contentRect.top,
+        widthPx: rect.width,
+        heightPx: rect.height,
+        rowIndex: rowIndexFor(article, rowContainer),
+        truncatedNote: opts.truncatedNotes.get(article.id),
+      });
+    } catch (e) {
+      console.warn(`Failed to capture canvas component "${article.id}"`, e);
+    }
+    done += 1;
+    reportProgress();
+  }
+
+  return { blocks, contentWidthPx, backgroundColor };
+}
+
+// Canvas rows are <section> elements; use the section's DOM order as the row
+// index so components in the same row are grouped and laid out together.
+function rowIndexFor(article: HTMLElement, rowContainer: HTMLElement): number {
+  const section = article.closest("section");
+  if (!section) return 0;
+  const sections = Array.from(rowContainer.querySelectorAll("section"));
+  const index = sections.indexOf(section);
+  return index === -1 ? 0 : index;
+}
diff --git a/web-common/src/features/exports/pdf/expand-tables.ts b/web-common/src/features/exports/pdf/expand-tables.ts
new file mode 100644
index 000000000000..f7f05abe5bbc
--- /dev/null
+++ b/web-common/src/features/exports/pdf/expand-tables.ts
@@ -0,0 +1,73 @@
+// Canvas tables/pivots (web-common/.../pivot/PivotTable.svelte) use TanStack
+// Virtual, so only the rows in the visible viewport exist in the DOM. To capture
+// them we temporarily grow each table's scroll container so the virtualizer
+// materializes up to `rowCap` rows, then restore the original styles afterwards.
+
+const FALLBACK_ROW_HEIGHT_PX = 24;
+
+export interface ExpandTablesResult {
+  // Restores the original inline styles. Always call this in a `finally`.
+  restore: () => void;
+  // componentId -> footnote, for tables clipped to the row cap.
+  truncatedNotes: Map<string, string>;
+}
+
+export function expandTablesForCapture(
+  root: ParentNode,
+  rowCap: number,
+): ExpandTablesResult {
+  const restorers: Array<() => void> = [];
+  const truncatedNotes = new Map<string, string>();
+
+  root.querySelectorAll<HTMLElement>(".table-wrapper").forEach((wrapper) => {
+    const styles = getComputedStyle(wrapper);
+    const rowHeight = pxVar(styles, "--row-height") || FALLBACK_ROW_HEIGHT_PX;
+    const headerHeight = pxVar(styles, "--total-header-height");
+
+    // Full rendered content height (header + all fetched rows).
+    const fullContentHeight = wrapper.scrollHeight;
+    const cappedHeight = headerHeight + rowCap * rowHeight;
+    const targetHeight = Math.min(fullContentHeight, cappedHeight);
+    const clipped = fullContentHeight > cappedHeight + 1;
+
+    const prev = {
+      maxHeight: wrapper.style.maxHeight,
+      height: wrapper.style.height,
+      overflow: wrapper.style.overflow,
+    };
+    // A taller scroll element makes the virtualizer treat more rows as visible,
+    // so it renders them; overflow:visible prevents the cap from clipping.
+    wrapper.style.maxHeight = "none";
+    wrapper.style.height = `${targetHeight}px`;
+    wrapper.style.overflow = "visible";
+    restorers.push(() => {
+      wrapper.style.maxHeight = prev.maxHeight;
+      wrapper.style.height = prev.height;
+      wrapper.style.overflow = prev.overflow;
+    });
+
+    if (clipped) {
+      const totalRows = Math.max(
+        0,
+        Math.round((fullContentHeight - headerHeight) / rowHeight),
+      );
+      const componentId = wrapper.closest("article.component-card")?.id;
+      if (componentId) {
+        truncatedNotes.set(
+          componentId,
+          `Showing first ${rowCap} of ${totalRows} rows`,
+        );
+      }
+    }
+  });
+
+  return {
+    restore: () => restorers.forEach((r) => r()),
+    truncatedNotes,
+  };
+}
+
+function pxVar(styles: CSSStyleDeclaration, name: string): number {
+  const value = parseFloat(styles.getPropertyValue(name));
+  return Number.isFinite(value) ? value : 0;
+}
diff --git a/web-common/src/features/exports/pdf/export-canvas-pdf.ts b/web-common/src/features/exports/pdf/export-canvas-pdf.ts
new file mode 100644
index 000000000000..87ee16e33f55
--- /dev/null
+++ b/web-common/src/features/exports/pdf/export-canvas-pdf.ts
@@ -0,0 +1,77 @@
+import { get } from "svelte/store";
+import { queryClient } from "@rilldata/web-common/lib/svelte-query/globalQueryClient";
+import { getCanvasStore } from "@rilldata/web-common/features/canvas/state-managers/state-managers";
+import { assemblePdf } from "./assemble";
+import { captureCanvasBlocks } from "./capture";
+import { buildPdfFilename } from "./filename";
+import { expandTablesForCapture } from "./expand-tables";
+import { paginate } from "./layout";
+import { prepareCanvasForCapture } from "./settle";
+import type { ExportCanvasPdfOptions } from "./types";
+
+// Orchestrates a client-side canvas-to-PDF export: force-render the canvas,
+// rasterize the filter bar + each component, paginate to mirror the on-screen
+// layout, then assemble and download the PDF. Stateless; the caller owns UI
+// state (loading flag, notifications).
+export async function exportCanvasPdf(
+  opts: ExportCanvasPdfOptions,
+): Promise<void> {
+  const { canvasEntity } = getCanvasStore(opts.canvasName, opts.instanceId);
+
+  const scrollContainer = document.querySelector<HTMLElement>(
+    "#canvas-scroll-container",
+  );
+  const scrollTop = scrollContainer?.scrollTop ?? 0;
+
+  let restoreTables: (() => void) | undefined;
+  try {
+    opts.onProgress?.({ phase: "preparing", ratio: 0 });
+    await prepareCanvasForCapture(canvasEntity, queryClient, {
+      timeoutMs: opts.timeoutMs,
+    });
+    opts.onProgress?.({ phase: "preparing", ratio: 1 });
+
+    const rowContainer =
+      scrollContainer?.querySelector<HTMLElement>(".row-container");
+    const { restore, truncatedNotes } = expandTablesForCapture(
+      rowContainer ?? document,
+      opts.tableRowCap,
+    );
+    restoreTables = restore;
+    // Let the virtualizer materialize the now-visible rows before capturing.
+    await new Promise((r) => requestAnimationFrame(() => r(null)));
+    await new Promise((r) => requestAnimationFrame(() => r(null)));
+
+    const { blocks, contentWidthPx, backgroundColor } =
+      await captureCanvasBlocks({
+        includeFilters: opts.includeFilters,
+        truncatedNotes,
+        onProgress: (ratio) => opts.onProgress?.({ phase: "capturing", ratio }),
+      });
+
+    if (!blocks.length) {
+      throw new Error("Nothing to export on this canvas.");
+    }
+
+    opts.onProgress?.({ phase: "assembling", ratio: 0 });
+    const pagination = paginate(blocks, {
+      contentWidthPx,
+      format: opts.format,
+      orientation: opts.orientation,
+    });
+
+    const title = get(canvasEntity.titleStore) || opts.canvasName;
+    // UTC, e.g. "2026-06-19 02:20 UTC".
+    const generatedAt = `${new Date().toISOString().replace("T", " ").slice(0, 16)} UTC`;
+    await assemblePdf(pagination, {
+      title,
+      filename: buildPdfFilename(title),
+      backgroundColor,
+      generatedAt,
+    });
+    opts.onProgress?.({ phase: "assembling", ratio: 1 });
+  } finally {
+    restoreTables?.();
+    if (scrollContainer) scrollContainer.scrollTop = scrollTop;
+  }
+}
diff --git a/web-common/src/features/exports/pdf/filename.ts b/web-common/src/features/exports/pdf/filename.ts
new file mode 100644
index 000000000000..4c5e0afc4743
--- /dev/null
+++ b/web-common/src/features/exports/pdf/filename.ts
@@ -0,0 +1,16 @@
+// Builds a download filename from a dashboard title plus a local timestamp,
+// e.g. "sales-overview-20260619-130412.pdf". Shared by the canvas and explore
+// PDF export orchestrators.
+export function buildPdfFilename(title: string): string {
+  const slug =
+    title
+      .toLowerCase()
+      .replace(/[^a-z0-9]+/g, "-")
+      .replace(/^-+|-+$/g, "") || "dashboard";
+  const now = new Date();
+  const pad = (n: number) => String(n).padStart(2, "0");
+  const stamp =
+    `${now.getFullYear()}${pad(now.getMonth() + 1)}${pad(now.getDate())}` +
+    `-${pad(now.getHours())}${pad(now.getMinutes())}${pad(now.getSeconds())}`;
+  return `${slug}-${stamp}.pdf`;
+}
diff --git a/web-common/src/features/exports/pdf/layout.spec.ts b/web-common/src/features/exports/pdf/layout.spec.ts
new file mode 100644
index 000000000000..810f5e762bcf
--- /dev/null
+++ b/web-common/src/features/exports/pdf/layout.spec.ts
@@ -0,0 +1,137 @@
+import { describe, expect, it } from "vitest";
+import { paginate, resolveOrientation } from "./layout";
+import type { CapturedBlock } from "./types";
+
+function block(
+  partial: Partial<CapturedBlock> & { id: string },
+): CapturedBlock {
+  return {
+    dataUrl: "data:image/png;base64,xxx",
+    xPx: 0,
+    yPx: 0,
+    widthPx: 1000,
+    heightPx: 200,
+    rowIndex: 0,
+    ...partial,
+  };
+}
+
+// A4 portrait content area: 841.89 - 48 ≈ 793.89pt tall, 595.28 - 48 ≈ 547.28pt wide.
+const A4 = { format: "a4" as const, orientation: "portrait" as const };
+
+describe("resolveOrientation", () => {
+  it("keeps explicit orientations", () => {
+    expect(resolveOrientation("portrait", 2000)).toBe("portrait");
+    expect(resolveOrientation("landscape", 100)).toBe("landscape");
+  });
+
+  it("auto picks landscape for wide canvases, portrait otherwise", () => {
+    expect(resolveOrientation("auto", 1200)).toBe("landscape");
+    expect(resolveOrientation("auto", 600)).toBe("portrait");
+  });
+});
+
+describe("paginate", () => {
+  it("places a single short row on one page, scaled to content width", () => {
+    const result = paginate(
+      [block({ id: "a", widthPx: 1000, heightPx: 200 })],
+      {
+        ...A4,
+        contentWidthPx: 1000,
+      },
+    );
+    expect(result.pageCount).toBe(1);
+    expect(result.orientation).toBe("portrait");
+    const p = result.placements[0];
+    // Scaled to the full content width.
+    expect(p.wPt).toBeCloseTo(result.pageWidthPt - 2 * result.marginPt, 1);
+    expect(p.page).toBe(0);
+    expect(p.xPt).toBeCloseTo(result.marginPt, 1);
+    expect(p.yPt).toBeCloseTo(result.marginPt, 1);
+  });
+
+  it("keeps two columns of one row on the same page side by side", () => {
+    const result = paginate(
+      [
+        block({ id: "left", xPx: 0, widthPx: 500, heightPx: 300, rowIndex: 0 }),
+        block({
+          id: "right",
+          xPx: 500,
+          widthPx: 500,
+          heightPx: 300,
+          rowIndex: 0,
+        }),
+      ],
+      { ...A4, contentWidthPx: 1000 },
+    );
+    expect(result.pageCount).toBe(1);
+    const [left, right] = result.placements;
+    expect(left.page).toBe(0);
+    expect(right.page).toBe(0);
+    expect(right.xPt).toBeGreaterThan(left.xPt);
+  });
+
+  it("paginates multiple rows without splitting a component across pages", () => {
+    // Each row is ~half a page tall, so 3 rows span 2 pages and no single
+    // placement is sliced.
+    const rowHeight = 280; // px; scaled by ~0.547 => ~153pt, but tall enough that 3 don't fit one page
+    const blocks = [0, 1, 2, 3].map((i) =>
+      block({ id: `r${i}`, rowIndex: i, widthPx: 1000, heightPx: 900 }),
+    );
+    void rowHeight;
+    const result = paginate(blocks, { ...A4, contentWidthPx: 1000 });
+    // No placement should be a slice.
+    expect(result.placements.every((p) => p.srcHeightPx === undefined)).toBe(
+      true,
+    );
+    // Each block appears exactly once.
+    expect(result.placements).toHaveLength(4);
+    // More than one page used.
+    expect(result.pageCount).toBeGreaterThan(1);
+    // Every block fits within a single page (height <= content height).
+    const contentHeight = result.pageHeightPt - 2 * result.marginPt;
+    for (const p of result.placements) {
+      expect(p.hPt).toBeLessThanOrEqual(contentHeight + 0.5);
+      expect(p.yPt + p.hPt).toBeLessThanOrEqual(
+        result.pageHeightPt - result.marginPt + 0.5,
+      );
+    }
+  });
+
+  it("slices a single component taller than a full page across pages", () => {
+    // 5000px tall at scale ~0.547 => ~2735pt, content height ~794pt => 4 slices.
+    const result = paginate(
+      [block({ id: "tall-table", widthPx: 1000, heightPx: 5000 })],
+      { ...A4, contentWidthPx: 1000 },
+    );
+    const slices = result.placements.filter((p) => p.block.id === "tall-table");
+    expect(slices.length).toBeGreaterThan(1);
+    // Slices have complementary, non-overlapping source crops covering the image.
+    const sorted = [...slices].sort(
+      (a, b) => (a.srcYPx ?? 0) - (b.srcYPx ?? 0),
+    );
+    let covered = 0;
+    for (const s of sorted) {
+      expect(s.srcYPx).toBeCloseTo(covered, 0);
+      covered += s.srcHeightPx ?? 0;
+    }
+    expect(covered).toBeCloseTo(5000, 0);
+    // Each slice lives on its own page.
+    expect(new Set(slices.map((s) => s.page)).size).toBe(slices.length);
+  });
+
+  it("places the filter bar (rowIndex -1) before content rows", () => {
+    const result = paginate(
+      [
+        block({ id: "comp", rowIndex: 0, heightPx: 200 }),
+        block({ id: "__filter_bar__", rowIndex: -1, heightPx: 80 }),
+      ],
+      { ...A4, contentWidthPx: 1000 },
+    );
+    const filter = result.placements.find(
+      (p) => p.block.id === "__filter_bar__",
+    )!;
+    const comp = result.placements.find((p) => p.block.id === "comp")!;
+    expect(filter.yPt).toBeLessThan(comp.yPt);
+  });
+});
diff --git a/web-common/src/features/exports/pdf/layout.ts b/web-common/src/features/exports/pdf/layout.ts
new file mode 100644
index 000000000000..f787cb599c0f
--- /dev/null
+++ b/web-common/src/features/exports/pdf/layout.ts
@@ -0,0 +1,171 @@
+import type {
+  CapturedBlock,
+  PdfPageFormat,
+  PdfOrientation,
+  ResolvedOrientation,
+} from "./types";
+
+// Page dimensions in PostScript points (1/72 inch), portrait orientation.
+// jsPDF measures in points by default, so these feed directly into it.
+const PAGE_SIZES_PT: Record<PdfPageFormat, { width: number; height: number }> =
+  {
+    a4: { width: 595.28, height: 841.89 },
+    letter: { width: 612, height: 792 },
+  };
+
+const DEFAULT_MARGIN_PT = 24;
+// Vertical gap between canvas rows, in points.
+const ROW_GAP_PT = 12;
+// A canvas wider than this (in CSS px) is exported as landscape under "auto".
+const AUTO_LANDSCAPE_WIDTH_PX = 900;
+
+export interface PaginateOptions {
+  contentWidthPx: number;
+  format: PdfPageFormat;
+  orientation: PdfOrientation;
+  marginPt?: number;
+}
+
+export interface Placement {
+  block: CapturedBlock;
+  // 0-based page index.
+  page: number;
+  xPt: number;
+  yPt: number;
+  wPt: number;
+  hPt: number;
+  // For blocks sliced across pages: the source crop within the image, in image
+  // pixels. Undefined when the whole block is drawn.
+  srcYPx?: number;
+  srcHeightPx?: number;
+}
+
+export interface PaginationResult {
+  pageWidthPt: number;
+  pageHeightPt: number;
+  marginPt: number;
+  pageCount: number;
+  orientation: ResolvedOrientation;
+  placements: Placement[];
+}
+
+export function resolveOrientation(
+  orientation: PdfOrientation,
+  contentWidthPx: number,
+): ResolvedOrientation {
+  if (orientation === "auto") {
+    return contentWidthPx > AUTO_LANDSCAPE_WIDTH_PX ? "landscape" : "portrait";
+  }
+  return orientation;
+}
+
+// Groups blocks into canvas rows (preserving DOM order within a row) and walks
+// them top-to-bottom, scaling the on-screen layout to the page content width.
+// A row that would overflow the current page moves wholesale to the next page;
+// a single-block row taller than a full page is sliced across pages.
+export function paginate(
+  blocks: CapturedBlock[],
+  opts: PaginateOptions,
+): PaginationResult {
+  const orientation = resolveOrientation(opts.orientation, opts.contentWidthPx);
+  const size = PAGE_SIZES_PT[opts.format];
+  const pageWidthPt = orientation === "landscape" ? size.height : size.width;
+  const pageHeightPt = orientation === "landscape" ? size.width : size.height;
+  const marginPt = opts.marginPt ?? DEFAULT_MARGIN_PT;
+
+  const contentWidthPt = pageWidthPt - 2 * marginPt;
+  const contentHeightPt = pageHeightPt - 2 * marginPt;
+  const scale =
+    opts.contentWidthPx > 0 ? contentWidthPt / opts.contentWidthPx : 1;
+
+  const rows = groupIntoRows(blocks);
+
+  const placements: Placement[] = [];
+  let page = 0;
+  let cursorYPt = marginPt;
+
+  for (const row of rows) {
+    const rowTopPx = Math.min(...row.map((b) => b.yPx));
+    const rowHeightPt = Math.max(...row.map((b) => b.heightPx)) * scale;
+
+    // A row taller than a full page must be sliced. We only slice single-block
+    // rows (the common case: a tall table); multi-block tall rows are rare and
+    // fall through to normal placement on a fresh page.
+    if (rowHeightPt > contentHeightPt && row.length === 1) {
+      if (cursorYPt > marginPt) {
+        page += 1;
+        cursorYPt = marginPt;
+      }
+      const block = row[0];
+      const wPt = block.widthPx * scale;
+      const xPt = marginPt + block.xPx * scale;
+      // How many source pixels fit in one page of content height.
+      const pageSrcPx = contentHeightPt / scale;
+      let srcYPx = 0;
+      while (srcYPx < block.heightPx - 0.5) {
+        const srcHeightPx = Math.min(pageSrcPx, block.heightPx - srcYPx);
+        placements.push({
+          block,
+          page,
+          xPt,
+          yPt: marginPt,
+          wPt,
+          hPt: srcHeightPx * scale,
+          srcYPx,
+          srcHeightPx,
+        });
+        srcYPx += srcHeightPx;
+        page += 1;
+        cursorYPt = marginPt;
+      }
+      continue;
+    }
+
+    // Move the whole row to the next page if it doesn't fit and isn't already
+    // at the top of a page.
+    if (
+      cursorYPt > marginPt &&
+      cursorYPt + rowHeightPt > pageHeightPt - marginPt
+    ) {
+      page += 1;
+      cursorYPt = marginPt;
+    }
+
+    for (const block of row) {
+      placements.push({
+        block,
+        page,
+        xPt: marginPt + block.xPx * scale,
+        yPt: cursorYPt + (block.yPx - rowTopPx) * scale,
+        wPt: block.widthPx * scale,
+        hPt: block.heightPx * scale,
+      });
+    }
+
+    cursorYPt += rowHeightPt + ROW_GAP_PT;
+  }
+
+  return {
+    pageWidthPt,
+    pageHeightPt,
+    marginPt,
+    pageCount: placements.length
+      ? Math.max(...placements.map((p) => p.page)) + 1
+      : 0,
+    orientation,
+    placements,
+  };
+}
+
+// Orders blocks by rowIndex, then by horizontal position within the row.
+function groupIntoRows(blocks: CapturedBlock[]): CapturedBlock[][] {
+  const byRow = new Map<number, CapturedBlock[]>();
+  for (const block of blocks) {
+    const row = byRow.get(block.rowIndex);
+    if (row) row.push(block);
+    else byRow.set(block.rowIndex, [block]);
+  }
+  return [...byRow.keys()]
+    .sort((a, b) => a - b)
+    .map((rowIndex) => byRow.get(rowIndex)!.sort((a, b) => a.xPx - b.xPx));
+}
diff --git a/web-common/src/features/exports/pdf/settle.ts b/web-common/src/features/exports/pdf/settle.ts
new file mode 100644
index 000000000000..0eacd0643886
--- /dev/null
+++ b/web-common/src/features/exports/pdf/settle.ts
@@ -0,0 +1,86 @@
+import type { QueryClient } from "@tanstack/svelte-query";
+import { get, type Readable } from "svelte/store";
+import { tick } from "svelte";
+import type { CanvasEntity } from "@rilldata/web-common/features/canvas/stores/canvas-entity";
+
+const DEFAULT_TIMEOUT_MS = 30_000;
+
+function raf(): Promise<void> {
+  return new Promise((resolve) => requestAnimationFrame(() => resolve()));
+}
+
+// Resolves once `predicate` holds for the store's value, or after `timeoutMs`.
+// Returns true if the predicate was satisfied, false on timeout.
+export function waitForStore<T>(
+  store: Readable<T>,
+  predicate: (value: T) => boolean,
+  timeoutMs: number,
+): Promise<boolean> {
+  if (predicate(get(store))) return Promise.resolve(true);
+
+  return new Promise((resolve) => {
+    let settled = false;
+    const finish = (value: boolean) => {
+      if (settled) return;
+      settled = true;
+      clearTimeout(timer);
+      unsub();
+      resolve(value);
+    };
+    const timer = setTimeout(() => finish(false), timeoutMs);
+    const unsub = store.subscribe((value) => {
+      if (predicate(value)) finish(true);
+    });
+  });
+}
+
+// Resolves once there are no in-flight queries for `stableFrames` consecutive
+// animation frames (debouncing the gaps between dependent queries), or on timeout.
+export async function waitUntilQueriesIdle(
+  queryClient: QueryClient,
+  opts: { stableFrames?: number; timeoutMs: number },
+): Promise<boolean> {
+  const stableFrames = opts.stableFrames ?? 2;
+  const deadline = Date.now() + opts.timeoutMs;
+  let stable = 0;
+  while (Date.now() < deadline) {
+    if (queryClient.isFetching() === 0) {
+      stable += 1;
+      if (stable >= stableFrames) return true;
+    } else {
+      stable = 0;
+    }
+    await raf();
+  }
+  return false;
+}
+
+// Forces every canvas component to render (bypassing the IntersectionObserver
+// lazy-load), then waits for the canvas, its data, and fonts to settle so the
+// DOM is ready to be rasterized. Best-effort: returns even on timeout.
+export async function prepareCanvasForCapture(
+  canvasEntity: CanvasEntity,
+  queryClient: QueryClient,
+  opts: { timeoutMs?: number } = {},
+): Promise<void> {
+  const timeoutMs = opts.timeoutMs ?? DEFAULT_TIMEOUT_MS;
+
+  // Force-render all components; idempotent with the IntersectionObserver.
+  for (const component of canvasEntity.componentsStore.read().values()) {
+    component.visible.set(true);
+  }
+
+  await tick();
+  await raf();
+  await raf();
+
+  await waitForStore(canvasEntity.firstLoad, (v) => v === false, timeoutMs);
+  await waitUntilQueriesIdle(queryClient, { timeoutMs });
+
+  if (document.fonts) {
+    await document.fonts.ready;
+  }
+  // Give Vega/canvas renderers a couple of frames to flush their final paint.
+  await raf();
+  await raf();
+}
diff --git a/web-common/src/features/exports/pdf/types.ts b/web-common/src/features/exports/pdf/types.ts
new file mode 100644
index 000000000000..af04690a5d6a
--- /dev/null
+++ b/web-common/src/features/exports/pdf/types.ts
@@ -0,0 +1,55 @@
+export type PdfPageFormat = "a4" | "letter";
+
+// "auto" resolves to landscape for wide canvases and portrait otherwise.
+export type PdfOrientation = "portrait" | "landscape" | "auto";
+
+// Resolved orientation (after "auto" has been decided).
+export type ResolvedOrientation = "portrait" | "landscape";
+
+export interface ExportProgress {
+  phase: "preparing" | "capturing" | "assembling";
+  // 0..1 within the current phase.
+  ratio: number;
+}
+
+// The options collected by the shared ExportPdfOptions form. Surface-specific
+// orchestrators (canvas, explore) receive these plus their own identifiers.
+export interface PdfExportRunOptions {
+  includeFilters: boolean;
+  format: PdfPageFormat;
+  orientation: PdfOrientation;
+  tableRowCap: number;
+  onProgress?: (progress: ExportProgress) => void;
+}
+
+export interface ExportCanvasPdfOptions {
+  canvasName: string;
+  instanceId: string;
+  includeFilters: boolean;
+  format: PdfPageFormat;
+  orientation: PdfOrientation;
+  // Max rows captured per virtualized table/pivot component.
+  tableRowCap: number;
+  timeoutMs?: number;
+  onProgress?: (progress: ExportProgress) => void;
+}
+
+// Sentinel rowIndex/id for the filter bar block, which always renders first.
+export const FILTER_BAR_ID = "__filter_bar__";
+export const FILTER_BAR_ROW_INDEX = -1;
+
+// A rasterized block (the filter bar or a single component) plus its position
+// and size in the canvas content area, measured in CSS pixels.
+export interface CapturedBlock {
+  id: string;
+  dataUrl: string;
+  // Position relative to the content area's top-left, in CSS pixels.
+  xPx: number;
+  yPx: number;
+  widthPx: number;
+  heightPx: number;
+  // Components sharing a rowIndex are laid out on the same canvas row.
+  rowIndex: number;
+  // Footnote drawn on the block, e.g. "Showing first 100 of 540 rows".
+  truncatedNote?: string;
+}