https://github.com/codebygio/svelte-pagedjs
A Svelte wrapper for PagedJS, providing easy pagination and print layout capabilities for your Svelte applications.
https://github.com/codebygio/svelte-pagedjs
pagedjs print svelte sveltekit
Last synced: 4 months ago
JSON representation
A Svelte wrapper for PagedJS, providing easy pagination and print layout capabilities for your Svelte applications.
- Host: GitHub
- URL: https://github.com/codebygio/svelte-pagedjs
- Owner: codebygio
- Created: 2025-01-16T02:24:44.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2025-01-16T15:38:04.000Z (over 1 year ago)
- Last Synced: 2025-09-17T15:57:47.439Z (9 months ago)
- Topics: pagedjs, print, svelte, sveltekit
- Language: Svelte
- Homepage: http://localhost:5173/libs/svelte-pagedjs
- Size: 29.3 KB
- Stars: 2
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# svelte-pagedjs
A Svelte wrapper for PagedJS, providing easy pagination and print layout capabilities for your Svelte applications.
## Installation
```bash
npm install svelte-pagedjs pagedjs
```
## Features
- 📑 Page-based content layout
- 🖨️ Print-optimized rendering
- 📏 Automatic content resizing
- ✏️ Editable content support
- 📊 Performance metrics
- 🎨 Custom CSS styling support
## Usage
```svelte
import { Pagedjs } from 'svelte-pagedjs';
// Optional configuration
const options = {
enableContentEditable: true,
autoResize: true,
scaleWidth: 0.9,
cssFiles: ['path/to/your/styles.css'],
showMetrics: true
};
My Paged Content
This content will be paginated...
```
## Configuration Options
| Option | Type | Default | Description |
|--------|------|---------|-------------|
| `enableContentEditable` | boolean | `false` | Makes the content editable after rendering |
| `autoResize` | boolean | `false` | Enables automatic resizing of content |
| `scaleWidth` | number | `0.9` | Scale factor for content width (0-1) |
| `cssFiles` | string[] | `[]` | Array of CSS file paths to apply |
| `showMetrics` | boolean | `false` | Shows rendering performance metrics |
## Performance Metrics
When `showMetrics` is enabled, the component displays a performance dashboard showing:
- Total number of pages rendered
- Rendering time
- Start and completion timestamps
## Server-Side Rendering (SSR)
The component is SSR-friendly and automatically detects browser environment using `esm-env`.
## TypeScript Support
Full TypeScript support is included. Types are exported for easy integration:
```typescript
import type { PagedjsProps, PerformanceMetrics } from 'svelte-pagedjs';
```
## Example
```svelte
import { Pagedjs } from 'svelte-pagedjs';
Chapter 1
Your content here...
```
## Event Handling
The component automatically handles:
- Window resize events for responsive layouts
- Content editable toggling
- Cleanup on component destruction
## Browser Support
Works in modern browsers that support CSS Custom Properties and CSS Grid.
## Contributing
Contributions are welcome! Please feel free to submit a Pull Request.
## License
MIT
## Acknowledgements
Built on top of [PagedJS](https://pagedjs.org/)