epochs-pdf 0.1.0 → 0.1.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 +0 -99
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -7,102 +7,3 @@ A modern React PDF library for **generating** documents with React components an
|
|
|
7
7
|
```bash
|
|
8
8
|
npm install epochs-pdf
|
|
9
9
|
```
|
|
10
|
-
|
|
11
|
-
Peer dependencies: `react` and `react-dom` (≥ 18).
|
|
12
|
-
Viewer dependency: `pdfjs-dist` (installed automatically).
|
|
13
|
-
|
|
14
|
-
## Generate a PDF
|
|
15
|
-
|
|
16
|
-
```tsx
|
|
17
|
-
import { Document, Page, View, Text, download } from "epochs-pdf";
|
|
18
|
-
|
|
19
|
-
const doc = (
|
|
20
|
-
<Document title="Hello">
|
|
21
|
-
<Page size="A4" style={{ padding: 48 }}>
|
|
22
|
-
<View style={{ gap: 8 }}>
|
|
23
|
-
<Text style={{ fontSize: 24, fontWeight: "bold" }}>Hello epochs-pdf</Text>
|
|
24
|
-
<Text style={{ fontSize: 12, color: "#4b5563" }}>
|
|
25
|
-
Compose PDFs with React components.
|
|
26
|
-
</Text>
|
|
27
|
-
</View>
|
|
28
|
-
</Page>
|
|
29
|
-
</Document>
|
|
30
|
-
);
|
|
31
|
-
|
|
32
|
-
download(doc, "hello.pdf");
|
|
33
|
-
```
|
|
34
|
-
|
|
35
|
-
### Render helpers
|
|
36
|
-
|
|
37
|
-
```ts
|
|
38
|
-
import { pdf, toBlob, toUrl, download, renderToBuffer } from "epochs-pdf";
|
|
39
|
-
|
|
40
|
-
pdf(doc); // Uint8Array
|
|
41
|
-
toBlob(doc); // Blob
|
|
42
|
-
toUrl(doc); // object URL
|
|
43
|
-
download(doc, "a.pdf");
|
|
44
|
-
await renderToBuffer(doc);
|
|
45
|
-
```
|
|
46
|
-
|
|
47
|
-
## View a PDF
|
|
48
|
-
|
|
49
|
-
Same flow as a production viewer: resolve source → fetch/load `ArrayBuffer` → blob URL for open/download → `pdfjs.getDocument` → canvas page + thumbnail render, with zoom / rotate / print / scroll sync.
|
|
50
|
-
|
|
51
|
-
```tsx
|
|
52
|
-
import { PdfViewer } from "epochs-pdf";
|
|
53
|
-
import "epochs-pdf/viewer.css";
|
|
54
|
-
|
|
55
|
-
<PdfViewer
|
|
56
|
-
file="/docs/invoice.pdf"
|
|
57
|
-
height="80vh"
|
|
58
|
-
withThumbnails
|
|
59
|
-
enableMarkup // highlight / underline tools (default true)
|
|
60
|
-
/>
|
|
61
|
-
```
|
|
62
|
-
|
|
63
|
-
**Markup:** turn on Highlight or Underline, then select text. Erase removes one mark; Clear removes all.
|
|
64
|
-
|
|
65
|
-
Optional worker override:
|
|
66
|
-
|
|
67
|
-
```ts
|
|
68
|
-
import { setPdfWorkerSrc } from "epochs-pdf";
|
|
69
|
-
|
|
70
|
-
setPdfWorkerSrc(
|
|
71
|
-
new URL("pdfjs-dist/build/pdf.worker.min.mjs", import.meta.url).toString(),
|
|
72
|
-
);
|
|
73
|
-
```
|
|
74
|
-
|
|
75
|
-
## Local development
|
|
76
|
-
|
|
77
|
-
```bash
|
|
78
|
-
npm install
|
|
79
|
-
npm run playground # http://localhost:5173
|
|
80
|
-
npm run build # Build publishable dist/
|
|
81
|
-
```
|
|
82
|
-
|
|
83
|
-
The playground lists every viewer tool as a tab. Each tab shows:
|
|
84
|
-
|
|
85
|
-
1. **How to use** steps for that feature
|
|
86
|
-
2. **Copy-paste code** in TypeScript or JavaScript
|
|
87
|
-
3. A **live PdfViewer** matching that snippet
|
|
88
|
-
|
|
89
|
-
Open a tab, try the viewer, then click **Copy code** and paste into your app (after `npm install epochs-pdf` and importing `epochs-pdf/viewer.css`).
|
|
90
|
-
|
|
91
|
-
### Project layout
|
|
92
|
-
|
|
93
|
-
```
|
|
94
|
-
src/ # Library source (generator + PdfViewer)
|
|
95
|
-
playground/ # Interactive demo app
|
|
96
|
-
dist/ # Build output (npm package files)
|
|
97
|
-
```
|
|
98
|
-
|
|
99
|
-
## Publish
|
|
100
|
-
|
|
101
|
-
```bash
|
|
102
|
-
npm run build
|
|
103
|
-
npm publish --access public
|
|
104
|
-
```
|
|
105
|
-
|
|
106
|
-
## License
|
|
107
|
-
|
|
108
|
-
MIT © Waleed Rajput
|