@embedpdf-editor/vue3-chapter-viewer 0.3.3 → 0.3.4
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 +89 -17
- package/package.json +4 -4
package/README.md
CHANGED
|
@@ -104,18 +104,28 @@ const options: ChapterViewerOptions = {
|
|
|
104
104
|
</style>
|
|
105
105
|
```
|
|
106
106
|
|
|
107
|
-
##
|
|
108
|
-
|
|
109
|
-
`options` 是三端渲染器的统一配置入口。
|
|
107
|
+
## 配置总览
|
|
110
108
|
|
|
111
|
-
|
|
|
109
|
+
| 层级 | 说明 |
|
|
112
110
|
| --- | --- |
|
|
113
|
-
| `
|
|
114
|
-
| `
|
|
115
|
-
| `
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
111
|
+
| `ChapterViewerOptions` | `ChapterPdfViewer` 的 `options`:**manifest**、**notes**、**bookmarks**、**features** 等 |
|
|
112
|
+
| `ChapterViewerConfig` | `options.features`:划线样式、图标、缩放、选区工具栏 |
|
|
113
|
+
| `ChapterPdfViewer` props | `class-name`、`build-selection-menu`、`@extra-selection-action` 等 |
|
|
114
|
+
|
|
115
|
+
省略 `features` 时默认全部开启。字段说明与 [React 包 README](../react-chapter-viewer/README.md) 一致,下文为 Vue 3 用法示例。
|
|
116
|
+
|
|
117
|
+
---
|
|
118
|
+
|
|
119
|
+
## `ChapterViewerOptions`
|
|
120
|
+
|
|
121
|
+
| 字段 | 必填 | 说明 |
|
|
122
|
+
| --- | --- | --- |
|
|
123
|
+
| `manifest` | 是 | `ChapterManifest` |
|
|
124
|
+
| `notes` | 是 | `NoteCallbacks`(须 `onCreateNote` 或 `onRequestCreateNote`) |
|
|
125
|
+
| `bookmarks` | 是 | `ParagraphBookmarkCallbacks`(删除须 `onRequestRemove` 返回 `true`) |
|
|
126
|
+
| `chapterPdfLoader` | 否 | 全局 `IChapterPdfLoader` |
|
|
127
|
+
| `overlapStrategy` | 否 | 默认 `{ kind: 'first-wins' }` |
|
|
128
|
+
| `features` | 否 | 见 [`features` 配置](#features-配置) |
|
|
119
129
|
|
|
120
130
|
### Manifest
|
|
121
131
|
|
|
@@ -136,6 +146,20 @@ type ChapterManifest = {
|
|
|
136
146
|
|
|
137
147
|
`globalPageRange` 和 `localPageRange` 都是闭区间,且页数必须一致。`chapterId` 同时作为内部 `documentId`,需要在整本书内唯一。
|
|
138
148
|
|
|
149
|
+
| 字段 | 说明 |
|
|
150
|
+
| --- | --- |
|
|
151
|
+
| `chapterId` / `title` | 唯一 ID 与标题 |
|
|
152
|
+
| `globalPageRange` / `localPageRange` | 全局与 PDF 内闭区间,页数须一致 |
|
|
153
|
+
| `source` | `url` \| `buffer` \| `load()`,见下文 |
|
|
154
|
+
| `encrypted` | 可选标记;密码流见 [加密 PDF](#加密-pdf-与-passwordprovider) |
|
|
155
|
+
| `ownedGlobalPages` | `overlapStrategy: explicit` 时使用 |
|
|
156
|
+
|
|
157
|
+
### `notes` / `bookmarks` 回调
|
|
158
|
+
|
|
159
|
+
**`NoteCallbacks`:** `loadNotes`、`onCreateNote` \| `onRequestCreateNote`(二选一)、`onRequestEditNote`、`onUpdateNote`、`onDeleteNote`。
|
|
160
|
+
|
|
161
|
+
**`ParagraphBookmarkCallbacks`:** `load`、`persist`、`onRequestRemove`(返回 `true` 才删除)、`onRemoveSuccess`。
|
|
162
|
+
|
|
139
163
|
### 嵌套目录树与重叠页
|
|
140
164
|
|
|
141
165
|
侧栏目录支持**任意层级**(`ChapterTreePanel` + `ChapterTreeNode.children`)。引擎滚动用的 `manifest.chapters` 是**扁平列表**:父节点页范围可包含子节点,相邻/重叠全局页由 **owner 策略** 决定只渲染一个章节的 PDF,避免同页画两遍。
|
|
@@ -227,6 +251,49 @@ const options: ChapterViewerOptions = {
|
|
|
227
251
|
};
|
|
228
252
|
```
|
|
229
253
|
|
|
254
|
+
### 加密 PDF 与 `passwordProvider`
|
|
255
|
+
|
|
256
|
+
```ts
|
|
257
|
+
import { CallbackPasswordProvider } from '@embedpdf-editor/vue3-chapter-viewer';
|
|
258
|
+
|
|
259
|
+
// 在 createPdfChapterEditor / 自定义 bundle 中传入
|
|
260
|
+
const passwordProvider = new CallbackPasswordProvider(async (chapter, attempt) =>
|
|
261
|
+
askPassword(chapter.chapterId, attempt),
|
|
262
|
+
);
|
|
263
|
+
```
|
|
264
|
+
|
|
265
|
+
---
|
|
266
|
+
|
|
267
|
+
## `features` 配置
|
|
268
|
+
|
|
269
|
+
`ChapterViewerConfig`:每项可 `true` | `false` | 对象。
|
|
270
|
+
|
|
271
|
+
| 模块 | 主要字段 |
|
|
272
|
+
| --- | --- |
|
|
273
|
+
| `markup` | `enabled`、`styles`(`color`/`thickness`/`offsetY`/`opacity`)、`annotationMenu`(`enabled`、`renderMenu`) |
|
|
274
|
+
| `bookmarks` | `enabled`、`marker`(`renderIcon`、`iconSize`)、`hover`(`renderAddIcon`、`iconSize`) |
|
|
275
|
+
| `notes` | `enabled`、`marker`(`renderIcon`、`renderMenuActions`、`iconSize`、`highlightColor`) |
|
|
276
|
+
| `zoom` | `enabled`(默认 true)、`min` 0.5、`max` 3、`initial` 1、`pageWidth` |
|
|
277
|
+
| `selectionToolbar` | `enabled`、`hiddenBuiltinActions`、`extraActions` |
|
|
278
|
+
|
|
279
|
+
默认划线 `offsetY`:`squiggly` 为 **4**。内置工具条按钮:`highlight` | `underline` | `squiggly` | `strikeout` | `note`。
|
|
280
|
+
|
|
281
|
+
---
|
|
282
|
+
|
|
283
|
+
## `ChapterPdfViewer` 组件
|
|
284
|
+
|
|
285
|
+
| Prop / 事件 | 说明 |
|
|
286
|
+
| --- | --- |
|
|
287
|
+
| `engine` / `options` | 必填引擎与配置 |
|
|
288
|
+
| `class-name` / `viewport-class-name` | 布局 |
|
|
289
|
+
| `build-selection-menu` | 包装划词菜单 |
|
|
290
|
+
| `@extra-selection-action` | 扩展工具条 |
|
|
291
|
+
| `#default` 子节点 | 视口内插槽 |
|
|
292
|
+
|
|
293
|
+
`PdfChapterViewport`:`annotation-selection-menu`(宿主优先于默认划线删除)、`features` 等。
|
|
294
|
+
|
|
295
|
+
---
|
|
296
|
+
|
|
230
297
|
## Worker 与 WASM
|
|
231
298
|
|
|
232
299
|
`usePdfiumEngine()` 默认使用 `@embedpdf/engines` 内置的 PDFium CDN wasm 地址,并默认启用 worker:
|
|
@@ -243,9 +310,9 @@ usePdfiumEngine({ wasmUrl: '/assets/pdfium.wasm', worker: true });
|
|
|
243
310
|
|
|
244
311
|
使用 `worker: true` 时,部署环境需要允许 worker 加载 wasm。若只在 worker 模式失败,可先用 `worker: false` 定位资源或响应头问题。
|
|
245
312
|
|
|
246
|
-
## `features`
|
|
313
|
+
## `features` 配置示例
|
|
247
314
|
|
|
248
|
-
|
|
315
|
+
完整字段表见 [React README 的 `features` 配置](../react-chapter-viewer/README.md#features-配置)。
|
|
249
316
|
|
|
250
317
|
### 划线颜色、粗细与位置
|
|
251
318
|
|
|
@@ -348,19 +415,24 @@ const { plugins, features } = createChapterViewerBundle(options);
|
|
|
348
415
|
|
|
349
416
|
## 标注导入导出
|
|
350
417
|
|
|
351
|
-
包内直接导出章节标注 IO:
|
|
352
|
-
|
|
353
418
|
```ts
|
|
354
419
|
import {
|
|
420
|
+
exportChapterAnnotations,
|
|
355
421
|
exportAllChapterAnnotations,
|
|
356
422
|
importChapterAnnotationsArchive,
|
|
357
|
-
|
|
358
|
-
parseChapterAnnotationsArchiveJson,
|
|
423
|
+
CHAPTER_ANNOTATIONS_ARCHIVE_VERSION,
|
|
359
424
|
useRegistry,
|
|
360
425
|
} from '@embedpdf-editor/vue3-chapter-viewer';
|
|
361
426
|
```
|
|
362
427
|
|
|
363
|
-
|
|
428
|
+
| 选项 | 说明 |
|
|
429
|
+
| --- | --- |
|
|
430
|
+
| `mode` | `replace` \| `merge` |
|
|
431
|
+
| `bookmarks` / `notes` / `markup` | 导入导出子集,默认 true |
|
|
432
|
+
| `ensureChapterLoaded` | 默认 true |
|
|
433
|
+
| `persistNotes` / `persistBookmarks` | 导入后写回存储 |
|
|
434
|
+
|
|
435
|
+
详见 [React README 标注章节](../react-chapter-viewer/README.md#标注导入导出)。
|
|
364
436
|
|
|
365
437
|
## 常见问题
|
|
366
438
|
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@embedpdf-editor/vue3-chapter-viewer",
|
|
3
|
-
"version": "0.3.
|
|
3
|
+
"version": "0.3.4",
|
|
4
4
|
"type": "module",
|
|
5
5
|
"license": "MIT",
|
|
6
6
|
"main": "./dist/index.cjs",
|
|
@@ -50,13 +50,13 @@
|
|
|
50
50
|
"vue": "^3.5.0",
|
|
51
51
|
"@embedpdf-editor/chapter-core": "0.1.0",
|
|
52
52
|
"@embedpdf-editor/chapter-viewer": "0.1.0",
|
|
53
|
-
"@embedpdf-editor/plugin-chapter-manager": "0.1.0",
|
|
54
53
|
"@embedpdf-editor/editor-engine": "0.1.0",
|
|
54
|
+
"@embedpdf-editor/plugin-chapter-manager": "0.1.0",
|
|
55
55
|
"@embedpdf-editor/plugin-chapter-scroll": "0.1.0",
|
|
56
|
+
"@embedpdf-editor/plugin-chapter-render": "0.1.0",
|
|
56
57
|
"@embedpdf-editor/plugin-note": "0.1.0",
|
|
57
|
-
"@embedpdf-editor/plugin-paragraph-bookmark": "0.1.0",
|
|
58
58
|
"@embedpdf-editor/plugin-editor-toolbar": "0.1.0",
|
|
59
|
-
"@embedpdf-editor/plugin-
|
|
59
|
+
"@embedpdf-editor/plugin-paragraph-bookmark": "0.1.0",
|
|
60
60
|
"@embedpdf/build": "1.1.0"
|
|
61
61
|
},
|
|
62
62
|
"files": [
|