svelte-pdf-view 0.1.7 → 0.1.8

package/README.md

@@ -60,11 +60,13 @@ This is especially important in monorepo setups where Vite's optimizer may incor
 <div style="height: 100vh;">
 	<PdfViewer src="/document.pdf">
 		<PdfToolbar />
-		<PdfRenderer src="/document.pdf" />
+		<PdfRenderer />
 	</PdfViewer>
 </div>
 ```
 
+The `src` prop is passed to `PdfViewer` and automatically shared with `PdfRenderer` via context - no need to pass it twice!
+
 ### Loading from Different Sources
 
 ```svelte
@@ -94,7 +96,7 @@ This is especially important in monorepo setups where Vite's optimizer may incor
 
 <PdfViewer src={pdfSource}>
 	<PdfToolbar />
-	<PdfRenderer src={pdfSource} />
+	<PdfRenderer />
 </PdfViewer>
 ```
 

package/dist/PdfRenderer.svelte

@@ -1,16 +1,20 @@
 <script lang="ts">
 	import { BROWSER } from 'esm-env';
 	import { onDestroy, onMount } from 'svelte';
-	import { getPdfViewerContext, type PdfViewerActions } from './pdf-viewer/context.js';
+	import {
+		getPdfViewerContext,
+		type PdfViewerActions,
+		type PdfSource
+	} from './pdf-viewer/context.js';
 	import { getPdfJs } from './pdf-viewer/pdfjs-singleton.js';
 	import { rendererStyles } from './pdf-viewer/renderer-styles.js';
 
-	/** PDF source - can be a URL string, ArrayBuffer, Uint8Array, or Blob */
-	export type PdfSource = string | ArrayBuffer | Uint8Array | Blob;
+	// Re-export PdfSource type for convenience
+	export type { PdfSource };
 
 	interface Props {
-		/** PDF source - URL string, ArrayBuffer, Uint8Array, or Blob */
-		src: PdfSource;
+		/** PDF source - URL string, ArrayBuffer, Uint8Array, or Blob. If not provided, uses src from PdfViewer context. */
+		src?: PdfSource;
 		/** Background color of the scroll container */
 		backgroundColor?: string;
 		/** Page shadow style */
@@ -26,7 +30,7 @@
 	}
 
 	let {
-		src,
+		src: srcProp,
 		backgroundColor = '#e8e8e8',
 		pageShadow = '0 2px 8px rgba(0, 0, 0, 0.12), 0 1px 3px rgba(0, 0, 0, 0.08)',
 		scrollbarTrackColor = '#f1f1f1',
@@ -35,7 +39,10 @@
 		scrollbarWidth = '10px'
 	}: Props = $props();
 
-	const { state: viewerState, _registerRenderer } = getPdfViewerContext();
+	const { state: viewerState, src: contextSrc, _registerRenderer } = getPdfViewerContext();
+
+	// Use prop src if provided, otherwise fall back to context src
+	let src = $derived(srcProp ?? contextSrc);
 
 	let hostEl: HTMLDivElement | undefined = $state();
 	let shadowRoot: ShadowRoot | null = null;
@@ -161,7 +168,8 @@
 				viewerState.searchCurrent = 0;
 				viewerState.searchTotal = 0;
 			}
-		}
+		},
+		download: () => {} // Download is handled by PdfViewer, not renderer
 	};
 
 	onMount(async () => {

package/dist/PdfRenderer.svelte.d.ts

@@ -1,8 +1,7 @@
-/** PDF source - can be a URL string, ArrayBuffer, Uint8Array, or Blob */
-export type PdfSource = string | ArrayBuffer | Uint8Array | Blob;
+import { type PdfSource } from './pdf-viewer/context.js';
 interface Props {
-    /** PDF source - URL string, ArrayBuffer, Uint8Array, or Blob */
-    src: PdfSource;
+    /** PDF source - URL string, ArrayBuffer, Uint8Array, or Blob. If not provided, uses src from PdfViewer context. */
+    src?: PdfSource;
     /** Background color of the scroll container */
     backgroundColor?: string;
     /** Page shadow style */
@@ -16,6 +15,8 @@ interface Props {
     /** Scrollbar width */
     scrollbarWidth?: string;
 }
-declare const PdfRenderer: import("svelte").Component<Props, {}, "">;
+declare const PdfRenderer: import("svelte").Component<Props, {
+    PdfSource: typeof PdfSource;
+}, "">;
 type PdfRenderer = ReturnType<typeof PdfRenderer>;
 export default PdfRenderer;

package/dist/PdfToolbar.svelte

@@ -6,7 +6,8 @@
 		RotateCw,
 		Search,
 		ChevronLeft,
-		ChevronRight
+		ChevronRight,
+		Download
 	} from '@lucide/svelte';
 	import { getPdfViewerContext } from './pdf-viewer/context.js';
 
@@ -114,6 +115,13 @@
 			<span class="match-info">{viewerState.searchCurrent}/{viewerState.searchTotal}</span>
 		{/if}
 	</div>
+
+	<!-- Download -->
+	<div class="pdf-toolbar-group">
+		<button onclick={() => actions.download()} aria-label="Download PDF" title="Download">
+			<Download size={18} />
+		</button>
+	</div>
 </div>
 
 <style>

package/dist/PdfViewer.svelte

@@ -9,9 +9,9 @@
 	import {
 		setPdfViewerContext,
 		type PdfViewerState,
-		type PdfViewerActions
+		type PdfViewerActions,
+		type PdfSource
 	} from './pdf-viewer/context.js';
-	import type { PdfSource } from './PdfRenderer.svelte';
 
 	interface Props {
 		/** PDF source - URL string, ArrayBuffer, Uint8Array, or Blob */
@@ -43,6 +43,48 @@
 	// Renderer actions - will be populated when renderer mounts
 	let rendererActions: PdfViewerActions | null = null;
 
+	// Download helper function
+	function downloadPdf(filename?: string) {
+		const downloadName =
+			filename ||
+			(typeof src === 'string' ? src.split('/').pop() : 'document.pdf') ||
+			'document.pdf';
+
+		if (typeof src === 'string') {
+			// URL - fetch and download
+			const link = document.createElement('a');
+			link.href = src;
+			link.download = downloadName;
+			link.click();
+		} else if (src instanceof Blob) {
+			// Blob - create object URL
+			const url = URL.createObjectURL(src);
+			const link = document.createElement('a');
+			link.href = url;
+			link.download = downloadName;
+			link.click();
+			URL.revokeObjectURL(url);
+		} else if (src instanceof ArrayBuffer) {
+			// ArrayBuffer
+			const blob = new Blob([src], { type: 'application/pdf' });
+			const url = URL.createObjectURL(blob);
+			const link = document.createElement('a');
+			link.href = url;
+			link.download = downloadName;
+			link.click();
+			URL.revokeObjectURL(url);
+		} else {
+			// Uint8Array - create a copy as ArrayBuffer
+			const blob = new Blob([new Uint8Array(src)], { type: 'application/pdf' });
+			const url = URL.createObjectURL(blob);
+			const link = document.createElement('a');
+			link.href = url;
+			link.download = downloadName;
+			link.click();
+			URL.revokeObjectURL(url);
+		}
+	}
+
 	// Actions that proxy to the renderer
 	const actions: PdfViewerActions = {
 		zoomIn: () => rendererActions?.zoomIn(),
@@ -58,13 +100,15 @@
 		},
 		searchNext: () => rendererActions?.searchNext(),
 		searchPrevious: () => rendererActions?.searchPrevious(),
-		clearSearch: () => rendererActions?.clearSearch()
+		clearSearch: () => rendererActions?.clearSearch(),
+		download: downloadPdf
 	};
 
 	// Set up context
 	setPdfViewerContext({
 		state,
 		actions,
+		src,
 		_registerRenderer: (renderer: PdfViewerActions) => {
 			rendererActions = renderer;
 		}

package/dist/PdfViewer.svelte.d.ts

@@ -1,7 +1,7 @@
 export { default as Toolbar } from './PdfToolbar.svelte';
 export { default as Renderer } from './PdfRenderer.svelte';
 import type { Snippet } from 'svelte';
-import type { PdfSource } from './PdfRenderer.svelte';
+import { type PdfSource } from './pdf-viewer/context.js';
 interface Props {
     /** PDF source - URL string, ArrayBuffer, Uint8Array, or Blob */
     src: PdfSource;

package/dist/index.d.ts

@@ -1,4 +1,4 @@
 export { default as PdfViewer, Toolbar as PdfToolbar, Renderer as PdfRenderer } from './PdfViewer.svelte';
-export type { PdfSource } from './PdfRenderer.svelte';
+export type { PdfSource } from './pdf-viewer/context.js';
 export { getPdfViewerContext, type PdfViewerState, type PdfViewerActions, type PdfViewerContext } from './pdf-viewer/context.js';
 export { destroyPdfJs } from './pdf-viewer/pdfjs-singleton.js';

package/dist/pdf-viewer/context.d.ts

@@ -1,3 +1,5 @@
+/** PDF source - can be a URL string, ArrayBuffer, Uint8Array, or Blob */
+export type PdfSource = string | ArrayBuffer | Uint8Array | Blob;
 export interface PdfViewerState {
     loading: boolean;
     error: string | null;
@@ -21,10 +23,13 @@ export interface PdfViewerActions {
     searchNext: () => void;
     searchPrevious: () => void;
     clearSearch: () => void;
+    download: (filename?: string) => void;
 }
 export interface PdfViewerContext {
     state: PdfViewerState;
     actions: PdfViewerActions;
+    /** The PDF source - shared from PdfViewer to PdfRenderer */
+    src: PdfSource;
     _registerRenderer: (renderer: PdfViewerActions) => void;
 }
 export declare function setPdfViewerContext(ctx: PdfViewerContext): void;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "svelte-pdf-view",
-	"version": "0.1.7",
+	"version": "0.1.8",
 	"description": "A modern, modular PDF viewer component for Svelte 5. Built on PDF.js with TypeScript support",
 	"author": "Louis Li",
 	"license": "Apache-2.0",