@svuick/pdf

Installation

npm i @svuick/pdf

What is this?

This package uses mozillas pdfjs to render PDFs in the browser.

Features

• zero styling
• ssr ready
• pages
• rotation
• scaling

Example

Usage

<script lang="ts">
	import PdfViewer from '@svuick/pdf';

	let currentPage = 1;
	let scale = 1.8;
</script>

<PdfViewer
	url="/sample.pdf"
	let:canvas
	bind:currentPage
	bind:scale
	let:pageCount
	let:next
	let:prev
	let:rotateCW
	let:rotateCCW
>
	<div>
		<button disabled={currentPage <= 1} on:click={prev}>
			<svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"
				><polygon
					points="3.828 9 9.899 2.929 8.485 1.515 0 10 .707 10.707 8.485
				18.485 9.899 17.071 3.828 11 20 11 20 9 3.828 9"
				/></svg
			>
		</button>
		<input type="number" min="1" max={pageCount} bind:value={currentPage} />
		<button disabled={currentPage >= pageCount} on:click={next}>
			<svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"
				><polygon
					points="16.172 9 10.101 2.929 11.515 1.515 20 10 19.293 10.707
				11.515 18.485 10.101 17.071 16.172 11 0 11 0 9"
				/></svg
			>
		</button>

		<button on:click={rotateCCW}>
			<svg class="icon rot-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"
				><path
					d="M14.66 15.66A8 8 0 1 1 17 10h-2a6 6 0 1 0-1.76 4.24l1.42
				1.42zM12 10h8l-4 4-4-4z"
				/></svg
			>
		</button>
		<button on:click={rotateCW}>
			<svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"
				><path
					d="M14.66 15.66A8 8 0 1 1 17 10h-2a6 6 0 1 0-1.76 4.24l1.42
				1.42zM12 10h8l-4 4-4-4z"
				/></svg
			>
		</button>
		<input type="number" min="1" max="3" step="0.1" bind:value={scale} />
	</div>
	<canvas use:canvas />
</PdfViewer>