edit-pdf 0.0.2 → 0.0.3
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 +79 -12
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
# edit-pdf
|
|
2
2
|
|
|
3
|
-
A powerful and flexible React PDF editor component.
|
|
3
|
+
A powerful and flexible React PDF editor component with comprehensive annotation tools.
|
|
4
4
|
|
|
5
5
|
## Installation
|
|
6
6
|
|
|
@@ -10,8 +10,11 @@ npm install edit-pdf
|
|
|
10
10
|
|
|
11
11
|
## Usage
|
|
12
12
|
|
|
13
|
+
### Basic Usage
|
|
14
|
+
|
|
13
15
|
```tsx
|
|
14
|
-
import
|
|
16
|
+
import PdfEditor from 'edit-pdf';
|
|
17
|
+
import { useState } from 'react';
|
|
15
18
|
|
|
16
19
|
function App() {
|
|
17
20
|
return (
|
|
@@ -24,24 +27,88 @@ function App() {
|
|
|
24
27
|
export default App;
|
|
25
28
|
```
|
|
26
29
|
|
|
30
|
+
### Advanced Usage with Export Control
|
|
31
|
+
|
|
32
|
+
```tsx
|
|
33
|
+
import PdfEditor from 'edit-pdf';
|
|
34
|
+
import { useState } from 'react';
|
|
35
|
+
|
|
36
|
+
function App() {
|
|
37
|
+
const [shouldExport, setShouldExport] = useState(false);
|
|
38
|
+
|
|
39
|
+
const handleSave = (file: File) => {
|
|
40
|
+
console.log("Saved file:", file);
|
|
41
|
+
// Download the file
|
|
42
|
+
const url = URL.createObjectURL(file);
|
|
43
|
+
const a = document.createElement("a");
|
|
44
|
+
a.href = url;
|
|
45
|
+
a.download = file.name || "edited.pdf";
|
|
46
|
+
document.body.appendChild(a);
|
|
47
|
+
a.click();
|
|
48
|
+
document.body.removeChild(a);
|
|
49
|
+
URL.revokeObjectURL(url);
|
|
50
|
+
// You can also upload to server, process the file, etc.
|
|
51
|
+
};
|
|
52
|
+
|
|
53
|
+
const handleSaveClick = () => {
|
|
54
|
+
setShouldExport(true);
|
|
55
|
+
};
|
|
56
|
+
|
|
57
|
+
return (
|
|
58
|
+
<div style={{ display: 'flex', flexDirection: 'column', height: '100vh' }}>
|
|
59
|
+
<button onClick={handleSaveClick}>Save PDF</button>
|
|
60
|
+
<div style={{ flex: 1, overflow: 'hidden' }}>
|
|
61
|
+
<PdfEditor
|
|
62
|
+
fileUrl="/path/to/document.pdf"
|
|
63
|
+
onSave={handleSave}
|
|
64
|
+
shouldExport={shouldExport}
|
|
65
|
+
onExportComplete={() => setShouldExport(false)}
|
|
66
|
+
/>
|
|
67
|
+
</div>
|
|
68
|
+
</div>
|
|
69
|
+
);
|
|
70
|
+
}
|
|
71
|
+
|
|
72
|
+
export default App;
|
|
73
|
+
```
|
|
74
|
+
|
|
27
75
|
## Features
|
|
28
76
|
|
|
29
77
|
- **View PDF**: Render PDF documents with high fidelity.
|
|
30
78
|
- **Annotations**:
|
|
31
|
-
- **Highlight**: Highlight text with customizable colors.
|
|
32
|
-
- **Pen**: Freehand drawing tool.
|
|
33
|
-
- **Text**: Insert text annotations.
|
|
34
|
-
- **Shapes**: Add rectangles, circles, arrows, and lines.
|
|
79
|
+
- **Highlight**: Highlight text with customizable colors and stroke width.
|
|
80
|
+
- **Pen**: Freehand drawing tool with customizable colors and stroke width.
|
|
81
|
+
- **Text**: Insert text annotations with customizable colors.
|
|
82
|
+
- **Shapes**: Add rectangles, circles, ellipses, arrows, and lines with customizable stroke colors, widths, and rotation.
|
|
35
83
|
- **Images**: Insert images into the PDF.
|
|
36
|
-
- **Signatures**: Create and manage signatures.
|
|
37
|
-
- **Eraser**: Remove annotations.
|
|
38
|
-
- **Search**: Find text within the document.
|
|
84
|
+
- **Signatures**: Create, save, and manage signatures with drawing canvas.
|
|
85
|
+
- **Eraser**: Remove annotations with adjustable eraser width.
|
|
86
|
+
- **Search**: Find and navigate text within the document.
|
|
87
|
+
- **Export**: Export annotated PDFs with all annotations embedded.
|
|
39
88
|
|
|
40
89
|
## Props
|
|
41
90
|
|
|
42
|
-
| Prop | Type | Description |
|
|
43
|
-
|
|
44
|
-
| `fileUrl` | `string` | The URL of the PDF file to load. |
|
|
91
|
+
| Prop | Type | Required | Description |
|
|
92
|
+
|------|------|----------|-------------|
|
|
93
|
+
| `fileUrl` | `string` | Yes | The URL of the PDF file to load. |
|
|
94
|
+
| `onSave` | `(file: File) => void` | No | Callback function called when PDF is exported. Receives the edited PDF file. |
|
|
95
|
+
| `shouldExport` | `boolean` | No | Boolean flag to trigger PDF export. Set to `true` to export the PDF. |
|
|
96
|
+
| `onExportComplete` | `() => void` | No | Callback function called after export is complete. Use this to reset `shouldExport` to `false`. |
|
|
97
|
+
|
|
98
|
+
## Export Workflow
|
|
99
|
+
|
|
100
|
+
The component uses a boolean trigger pattern for exporting:
|
|
101
|
+
|
|
102
|
+
1. Set `shouldExport` to `true` to trigger export
|
|
103
|
+
2. The component will generate the PDF and call `onSave` with the file
|
|
104
|
+
3. Call `onExportComplete` to reset the flag (typically set `shouldExport` back to `false`)
|
|
105
|
+
|
|
106
|
+
This pattern gives you full control over when and how the PDF is exported, allowing you to:
|
|
107
|
+
- Download the file
|
|
108
|
+
- Upload to a server
|
|
109
|
+
- Process the file before saving
|
|
110
|
+
- Show loading states
|
|
111
|
+
- Handle errors
|
|
45
112
|
|
|
46
113
|
## License
|
|
47
114
|
|