smart-pdf-js 1.0.0 β 1.0.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +25 -13
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -1,23 +1,27 @@
|
|
|
1
|
-
# Smart PDF
|
|
1
|
+
# Smart PDF JS
|
|
2
2
|
|
|
3
|
-
[](https://www.npmjs.com/package/smart-pdf)
|
|
3
|
+
[](https://www.npmjs.com/package/smart-pdf-js)
|
|
4
4
|
[](https://opensource.org/licenses/MIT)
|
|
5
|
-
[](https://www.npmjs.com/package/smart-pdf)
|
|
5
|
+
[](https://www.npmjs.com/package/smart-pdf-js)
|
|
6
6
|
|
|
7
7
|
**The ultimate DOM-to-PDF solution for modern web applications.**
|
|
8
8
|
|
|
9
|
-
`smart-pdf` is a powerful, lightweight, and developer-friendly wrapper around `html2canvas` and `jspdf`. It simplifies the complex process of generating multi-page PDFs from HTML, making it easy to turn your React, Next.js, or vanilla JavaScript web pages into professional-quality PDF documents.
|
|
9
|
+
`smart-pdf-js` is a powerful, lightweight, and developer-friendly wrapper around `html2canvas` and `jspdf`. It simplifies the complex process of generating multi-page PDFs from HTML, making it easy to turn your React, Next.js, or vanilla JavaScript web pages into professional-quality PDF documents.
|
|
10
10
|
|
|
11
|
-
Unlike standard libraries, `smart-pdf`
|
|
11
|
+
Unlike standard libraries, `smart-pdf-js` handles everything for you. **You do not need to install or configure** `html2canvas`, `jspdf`, or `dom-to-pdf` separately. One command gets you a complete PDF generation solution that even handles modern CSS features like **OKLCH colors** automatically.
|
|
12
|
+
|
|
13
|
+
With `smart-pdf-js`, you get a **simpler, streamlined workflow** compared to other solutions, letting you generate professional PDFs with features like **automatic page numbering** and customizable filenames right out of the box.
|
|
12
14
|
|
|
13
15
|
---
|
|
14
16
|
|
|
15
17
|
## Key Features
|
|
16
18
|
|
|
17
19
|
- **Multi-page Generation**: Effortlessly split your content across multiple pages using simple CSS selectors.
|
|
20
|
+
- **Automatic Page Numbering**: Built-in support for adding page numbers to your multi-page documents.
|
|
21
|
+
- **All-in-One Solution**: No need to juggle multiple libraries. Installing `smart-pdf-js` includes everything you need.
|
|
18
22
|
- ** OKLCH Color Support**: First-class support for modern CSS color spaces, automatically converting OKLCH to RGB for perfect rendering.
|
|
19
23
|
- ** React & Next.js Ready**: Designed to work seamlessly with modern component-based frameworks.
|
|
20
|
-
- ** Highly Configurable**: Full control over margins, orientation, formats (A4, Letter, etc.), and image quality.
|
|
24
|
+
- ** Highly Configurable**: Full control over **output filenames**, margins, orientation, formats (A4, Letter, etc.), and image quality.
|
|
21
25
|
- ** Lightweight**: Zero configuration needed for most use casesβjust install and generate.
|
|
22
26
|
|
|
23
27
|
---
|
|
@@ -28,7 +32,7 @@ Install the package via npm, yarn, or pnpm:
|
|
|
28
32
|
|
|
29
33
|
```bash
|
|
30
34
|
# npm
|
|
31
|
-
npm install smart-pdf
|
|
35
|
+
npm install smart-pdf-js
|
|
32
36
|
|
|
33
37
|
```
|
|
34
38
|
|
|
@@ -38,10 +42,10 @@ npm install smart-pdf
|
|
|
38
42
|
|
|
39
43
|
### 1. Vanilla JavaScript / Basic Usage
|
|
40
44
|
|
|
41
|
-
The simplest way to use `smart-pdf` is to define the sections you want to capture and call `generatePDF`.
|
|
45
|
+
The simplest way to use `smart-pdf-js` is to define the sections you want to capture and call `generatePDF`.
|
|
42
46
|
|
|
43
47
|
```javascript
|
|
44
|
-
import { generatePDF } from "smart-pdf";
|
|
48
|
+
import { generatePDF } from "smart-pdf-js";
|
|
45
49
|
|
|
46
50
|
const config = {
|
|
47
51
|
filename: "monthly-report.pdf",
|
|
@@ -74,7 +78,7 @@ In React, you can use `useRef` to target elements, but using unique IDs or class
|
|
|
74
78
|
|
|
75
79
|
```jsx
|
|
76
80
|
import React from "react";
|
|
77
|
-
import { generatePDF } from "smart-pdf";
|
|
81
|
+
import { generatePDF } from "smart-pdf-js";
|
|
78
82
|
|
|
79
83
|
const PDFReport = () => {
|
|
80
84
|
const handleDownload = async () => {
|
|
@@ -116,7 +120,7 @@ export default PDFReport;
|
|
|
116
120
|
|
|
117
121
|
### 3. Using with Next.js (App Router & Pages Router)
|
|
118
122
|
|
|
119
|
-
Since `smart-pdf` relies on browser APIs (`window`, `document`), it must be dynamically imported with `ssr: false` or used inside `useEffect` / event handlers to avoid Server-Side Rendering (SSR) errors like `ReferenceError: document is not defined`.
|
|
123
|
+
Since `smart-pdf-js` relies on browser APIs (`window`, `document`), it must be dynamically imported with `ssr: false` or used inside `useEffect` / event handlers to avoid Server-Side Rendering (SSR) errors like `ReferenceError: document is not defined`.
|
|
120
124
|
|
|
121
125
|
#### Method A: Inside a Client Component (Recommended for App Router)
|
|
122
126
|
|
|
@@ -128,12 +132,12 @@ import React from "react";
|
|
|
128
132
|
// You can import directly if function is called on an event (click)
|
|
129
133
|
// as the import will be resolved on the client.
|
|
130
134
|
|
|
131
|
-
import { generatePDF } from "smart-pdf";
|
|
135
|
+
import { generatePDF } from "smart-pdf-js";
|
|
132
136
|
|
|
133
137
|
export default function InvoicePage() {
|
|
134
138
|
const downloadInvoice = async () => {
|
|
135
139
|
// Alternatively, dynamic import inside the function for cleaner bundle splitting
|
|
136
|
-
// const { generatePDF } = await import('smart-pdf');
|
|
140
|
+
// const { generatePDF } = await import('smart-pdf-js');
|
|
137
141
|
|
|
138
142
|
await generatePDF({
|
|
139
143
|
filename: "invoice-123.pdf",
|
|
@@ -206,3 +210,11 @@ The `generatePDF(config)` function accepts a configuration object.
|
|
|
206
210
|
## π License
|
|
207
211
|
|
|
208
212
|
MIT Β© [Rashedul Haque Rasel](https://github.com/RashedulHaqueRasel1)
|
|
213
|
+
|
|
214
|
+
## π§βπ» Author
|
|
215
|
+
|
|
216
|
+
**Rashedul Haque Rasel**
|
|
217
|
+
|
|
218
|
+
π§ **Email:** [rashedulhaquerasel1@gmail.com](mailto:rashedulhaquerasel1@gmail.com)
|
|
219
|
+
π **Portfolio:** [View Portfolio](https://rashedul-haque-rasel.vercel.app)
|
|
220
|
+
πΌ **LinkedIn:** [View LinkedIn Profile](https://www.linkedin.com/in/rashedul-haque-rasel)
|
package/package.json
CHANGED