jvs-docx-ui 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.
Files changed (6) hide show
  1. package/README.md +44 -10
  2. package/dist/lib/index.d.ts +90 -15
  3. package/dist/lib/jvs-docx-ui.css +1 -1
  4. package/dist/lib/jvs-docx-ui.js +2145 -1941
  5. package/dist/lib/jvs-docx-ui.umd.cjs +23 -23
  6. package/package.json +2 -2
package/README.md CHANGED
@@ -18,22 +18,30 @@ pnpm build
18
18
  pnpm build:lib
19
19
  ```
20
20
 
21
- ## 2. 作为插件在外部项目中使用
21
+ ## 2. 支持的文档加载方式
22
22
 
23
- ### 全局注册
23
+ ### 方式一：作为 Vue 3 插件通过 Props 直接传入文件链接或文件流
24
24
 
25
- ```ts
26
- import { createApp } from 'vue'
27
- import JvsDocxUi from 'jvs-docx-ui'
25
+ `<JvsDocx />` 同时支持 `fileUrl`、`url`、`src`、`fileContent`、`v-model` 绑定远程/本地链接、`File`、`Blob`、`ArrayBuffer`、`Uint8Array` 或 Base64 字符串：
26
+
27
+ ```vue
28
+ <script setup lang="ts">
29
+ import { ref } from 'vue'
30
+ import { JvsDocx } from 'jvs-docx-ui'
28
31
  import 'jvs-docx-ui/style.css'
29
- import App from './App.vue'
30
32
 
31
- const app = createApp(App)
32
- app.use(JvsDocxUi)
33
- app.mount('#app')
33
+ const docUrl = ref('https://example.com/files/contract.docx')
34
+ const headers = { Authorization: 'Bearer xxx' }
35
+ </script>
36
+
37
+ <template>
38
+ <div style="height: 100vh">
39
+ <JvsDocx :file-url="docUrl" :request-headers="headers" />
40
+ </div>
41
+ </template>
34
42
  ```
35
43
 
36
- ### 按需引入与方法调用
44
+ ### 方式二：通过组件 Ref 实例方法主动加载（链接或本地文件）
37
45
 
38
46
  ```vue
39
47
  <script setup lang="ts">
@@ -43,6 +51,15 @@ import 'jvs-docx-ui/style.css'
43
51
 
44
52
  const docxRef = ref<JvsDocxExpose | null>(null)
45
53
 
54
+ // 1. 通过文件 URL 链接加载（支持自定义请求头）
55
+ async function loadByUrl(url: string) {
56
+ await docxRef.value?.loadFromUrl(url, {
57
+ fileName: '技术协议.docx',
58
+ headers: { Authorization: 'Bearer xxx' }
59
+ })
60
+ }
61
+
62
+ // 2. 通过本地 File / Blob / ArrayBuffer / Base64 加载
46
63
  async function onFileChange(e: Event) {
47
64
  const file = (e.target as HTMLInputElement).files?.[0]
48
65
  if (file) {
@@ -50,6 +67,7 @@ async function onFileChange(e: Event) {
50
67
  }
51
68
  }
52
69
 
70
+ // 3. 导出当前预览的 .docx 文件
53
71
  async function onExport() {
54
72
  await docxRef.value?.exportDocxFile('导出文档.docx', true)
55
73
  }
@@ -61,3 +79,19 @@ async function onExport() {
61
79
  </div>
62
80
  </template>
63
81
  ```
82
+
83
+ ### 方式三：独立站点部署模式下的外部传参加载
84
+
85
+ 1. **URL 查询参数自动加载**：
86
+ 直接访问 `http://your-host/?fileUrl=https://example.com/demo.docx&fileName=示例文档.docx`（或 `?url=...`），页面挂载后会自动拉取链接并渲染预览。
87
+ 2. **顶部工具栏链接输入**：
88
+ 在顶部工具栏输入框中粘贴 `.docx` 链接并点击「加载链接」或按回车即可预览。
89
+ 3. **iframe `postMessage` 通信加载**：
90
+ ```js
91
+ iframeWindow.postMessage({
92
+ type: 'jvs-docx:load',
93
+ fileUrl: 'https://example.com/demo.docx',
94
+ fileName: '示例文档.docx',
95
+ headers: { Authorization: 'Bearer xxx' }
96
+ }, '*')
97
+ ```
package/dist/lib/index.d.ts CHANGED
@@ -14,7 +14,25 @@ export { defaultOptions }
14
14
 
15
15
  export declare const DOCX_MIME_TYPE = "application/vnd.openxmlformats-officedocument.wordprocessingml.document";
16
16
 
17
- export declare type DocxInputSource = File | Blob | ArrayBuffer | Uint8Array | string;
17
+ export declare type DocxInputSource = File | Blob | ArrayBuffer | Uint8Array | string | {
18
+ url?: string;
19
+ fileUrl?: string;
20
+ content?: File | Blob | ArrayBuffer | Uint8Array | string;
21
+ fileName?: string;
22
+ headers?: Record<string, string>;
23
+ requestInit?: RequestInit;
24
+ };
25
+
26
+ export declare interface DocxLoadOptions {
27
+ /** 指定文件名（不传则自动从 File.name / Content-Disposition / URL 路径推断） */
28
+ fileName?: string;
29
+ /** 请求远程文件链接时的自定义请求头（例如 Authorization Token） */
30
+ headers?: Record<string, string>;
31
+ /** 请求远程文件链接时的透传 fetch RequestInit 配置 */
32
+ requestInit?: RequestInit;
33
+ /** 自定义文件拉取函数 */
34
+ customFetch?: (url: string, init?: RequestInit) => Promise<Blob | ArrayBuffer | Uint8Array | Response>;
35
+ }
18
36
 
19
37
  export { DocxPreviewOptions }
20
38
 
@@ -23,36 +41,63 @@ export { DocxPreviewOptions }
23
41
  */
24
42
  export declare function downloadDocxBlob(blob: Blob, fileName?: string): void;
25
43
 
44
+ /**
45
+ * 从 URL 或 Content-Disposition 响应头中提取文件名
46
+ */
47
+ export declare function extractFileNameFromUrl(url: string, contentDisposition?: string | null): string;
48
+
49
+ /**
50
+ * 通过 URL 拉取远程或本地 .docx 文件并转为 Blob
51
+ */
52
+ export declare function fetchDocxFromUrl(url: string, options?: DocxLoadOptions): Promise<NormalizedDocxResult>;
53
+
54
+ /**
55
+ * 判断字符串是否为 URL 或文件路径（而非纯 Base64 字符串）
56
+ */
57
+ export declare function isLikelyUrlString(str: string): boolean;
58
+
26
59
  export declare const JvsDocx: DefineComponent<JvsDocxProps, {
27
- importDocxFile: (source: DocxInputSource, fileName?: string) => Promise<WordDocument>;
28
- renderDocx: (source: DocxInputSource, fileName?: string) => Promise<WordDocument>;
60
+ importDocxFile: (source: DocxInputSource, optionsOrFileName?: string | DocxLoadOptions) => Promise<WordDocument>;
61
+ loadFromUrl: (url: string, optionsOrFileName?: string | DocxLoadOptions) => Promise<WordDocument>;
62
+ renderDocx: (source: DocxInputSource, optionsOrFileName?: string | DocxLoadOptions) => Promise<WordDocument>;
29
63
  exportDocxFile: (fileName?: string, download?: boolean) => Promise<Blob>;
30
64
  clear: () => void;
31
65
  getWordDocument: () => WordDocument | null;
32
66
  getBlob: () => Blob | null;
67
+ getFileName: () => string;
33
68
  getContainer: () => HTMLElement | null;
34
69
  }, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {
35
- rendered: (document: any) => any;
36
70
  error: (error: Error) => any;
71
+ rendered: (document: any) => any;
72
+ loaded: (payload: JvsDocxLoadedPayload) => any;
37
73
  change: (blob: Blob | null) => any;
38
74
  }, string, PublicProps, Readonly<JvsDocxProps> & Readonly<{
39
- onRendered?: ((document: any) => any) | undefined;
40
75
  onError?: ((error: Error) => any) | undefined;
76
+ onRendered?: ((document: any) => any) | undefined;
77
+ onLoaded?: ((payload: JvsDocxLoadedPayload) => any) | undefined;
41
78
  onChange?: ((blob: Blob | null) => any) | undefined;
42
79
  }>, {
43
- fileContent: DocxInputSource;
44
- fileUrl: string;
45
80
  fileName: string;
81
+ requestInit: RequestInit;
82
+ customFetch: (url: string, init?: RequestInit) => Promise<Blob | ArrayBuffer | Uint8Array | Response>;
83
+ fileUrl: string;
84
+ fileContent: DocxInputSource;
85
+ url: string;
86
+ src: DocxInputSource;
87
+ modelValue: DocxInputSource;
88
+ requestHeaders: Record<string, string>;
46
89
  options: Partial<DocxPreviewOptions>;
47
90
  }, {}, {}, {}, string, ComponentProvideOptions, false, {
48
91
  previewContainerRef: HTMLDivElement;
49
92
  }, HTMLDivElement>;
50
93
 
51
94
  export declare interface JvsDocxExpose {
52
- /** 使用 docxjs 导入并渲染 .docx 文件（支持 File / Blob / ArrayBuffer / Uint8Array / Base64 / URL） */
53
- importDocxFile: (source: DocxInputSource, fileName?: string) => Promise<WordDocument>;
54
- /** 使用 docxjs 渲染加载 .docx 文件（importDocxFile 的别名） */
55
- renderDocx: (source: DocxInputSource, fileName?: string) => Promise<WordDocument>;
95
+ /** 导入并渲染 .docx 文档（支持 File / Blob / ArrayBuffer / Uint8Array / URL 链接 / Base64 / 配置对象） */
96
+ importDocxFile: (source: DocxInputSource, optionsOrFileName?: string | DocxLoadOptions) => Promise<WordDocument>;
97
+ /** 通过远程或本地文件链接地址加载并渲染 .docx 文档 */
98
+ loadFromUrl: (url: string, optionsOrFileName?: string | DocxLoadOptions) => Promise<WordDocument>;
99
+ /** 使用 docxjs 渲染加载 .docx 文档（importDocxFile 的别名） */
100
+ renderDocx: (source: DocxInputSource, optionsOrFileName?: string | DocxLoadOptions) => Promise<WordDocument>;
56
101
  /** 导出当前预览的 .docx 文件 */
57
102
  exportDocxFile: (fileName?: string, download?: boolean) => Promise<Blob>;
58
103
  /** 清空当前文档预览内容 */
@@ -61,17 +106,37 @@ export declare interface JvsDocxExpose {
61
106
  getWordDocument: () => WordDocument | null;
62
107
  /** 获取当前文档的原始 Blob 数据 */
63
108
  getBlob: () => Blob | null;
109
+ /** 获取当前加载的文档文件名 */
110
+ getFileName: () => string;
64
111
  /** 获取预览容器 DOM 节点 */
65
112
  getContainer: () => HTMLElement | null;
66
113
  }
67
114
 
115
+ export declare interface JvsDocxLoadedPayload {
116
+ fileName: string;
117
+ blob: Blob;
118
+ document: WordDocument;
119
+ }
120
+
68
121
  export declare interface JvsDocxProps {
69
- /** Word (.docx) 文件内容（支持 File / Blob / ArrayBuffer / Uint8Array / Base64 字符串 / URL） */
122
+ /** Word (.docx) 文件内容或链接（支持 File / Blob / ArrayBuffer / Uint8Array / URL / Base64 / 配置对象） */
70
123
  fileContent?: DocxInputSource;
71
- /** 远程或本地 .docx 文件地址 */
124
+ /** 远程或本地 .docx 文件链接地址 */
72
125
  fileUrl?: string;
126
+ /** 远程或本地 .docx 文件链接地址（fileUrl 的简写别名） */
127
+ url?: string;
128
+ /** 通用文档数据源或链接地址（支持 URL / File / Blob / ArrayBuffer / Base64） */
129
+ src?: DocxInputSource;
130
+ /** 支持 v-model 绑定文档数据源或文件链接 */
131
+ modelValue?: DocxInputSource;
73
132
  /** 默认文档名称（用于导出时默认文件名） */
74
133
  fileName?: string;
134
+ /** 请求远程文件链接时的自定义请求头（例如 Authorization Token） */
135
+ requestHeaders?: Record<string, string>;
136
+ /** 请求远程文件链接时的 fetch RequestInit 配置（如 credentials: 'include'） */
137
+ requestInit?: RequestInit;
138
+ /** 自定义远程文件拉取函数 */
139
+ customFetch?: DocxLoadOptions['customFetch'];
75
140
  /** docxjs (docx-preview) 渲染配置项 */
76
141
  options?: Partial<DocxPreviewOptions>;
77
142
  }
@@ -80,10 +145,20 @@ declare const JvsDocxUiPlugin: Plugin_2;
80
145
  export { JvsDocxUiPlugin }
81
146
  export default JvsDocxUiPlugin;
82
147
 
148
+ export declare interface NormalizedDocxResult {
149
+ blob: Blob;
150
+ fileName: string;
151
+ }
152
+
153
+ /**
154
+ * 将各种输入源（File / Blob / ArrayBuffer / Uint8Array / URL 链接 / Base64 / 配置对象）统一解析为 Blob 与文件名
155
+ */
156
+ export declare function normalizeDocxSource(source: DocxInputSource, options?: DocxLoadOptions): Promise<NormalizedDocxResult>;
157
+
83
158
  /**
84
- * 将各种输入源（File / Blob / ArrayBuffer / Uint8Array / Base64 / URL）统一转换为 Blob
159
+ * 兼容旧版 API：将各种输入源统一转换为 Blob
85
160
  */
86
- export declare function normalizeDocxSourceToBlob(source: DocxInputSource): Promise<Blob>;
161
+ export declare function normalizeDocxSourceToBlob(source: DocxInputSource, options?: DocxLoadOptions): Promise<Blob>;
87
162
 
88
163
  export { parseAsync }
89
164
 
package/dist/lib/jvs-docx-ui.css CHANGED
@@ -1 +1 @@
1
- .jvs-docx-viewer[data-v-ebacf228]{position:relative;width:100%;height:100%;min-height:360px;background-color:#f1f5f9;overflow:hidden;display:flex;flex-direction:column}.jvs-docx-viewer__styles[data-v-ebacf228]{display:none}.jvs-docx-viewer__container[data-v-ebacf228]{flex:1;width:100%;height:100%;overflow:auto}.jvs-docx-viewer__overlay[data-v-ebacf228]{position:absolute;top:0;right:0;bottom:0;left:0;z-index:5;background-color:#f1f5f9;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:32px;color:#64748b;text-align:center;-webkit-user-select:none;user-select:none}.jvs-docx-viewer__overlay--error[data-v-ebacf228]{color:#ef4444}.jvs-docx-viewer__empty-icon[data-v-ebacf228]{display:flex;align-items:center;justify-content:center;width:76px;height:76px;border-radius:16px;background-color:#e2e8f0;color:#64748b;margin-bottom:16px}.jvs-docx-viewer__state-title[data-v-ebacf228]{margin:0 0 6px;font-size:15px;font-weight:600;color:#334155}.jvs-docx-viewer__overlay--error .jvs-docx-viewer__state-title[data-v-ebacf228]{margin-top:12px;color:#dc2626}.jvs-docx-viewer__state-desc[data-v-ebacf228]{margin:0;font-size:13px;color:#94a3b8;max-width:420px;line-height:1.6}.jvs-docx-viewer__state-text[data-v-ebacf228]{margin:14px 0 0;font-size:13px;color:#64748b}.jvs-docx-viewer__spinner[data-v-ebacf228]{width:32px;height:32px;border:3px solid #cbd5e1;border-top-color:#2563eb;border-radius:50%;animation:jvs-docx-spin-ebacf228 .75s linear infinite}@keyframes jvs-docx-spin-ebacf228{to{transform:rotate(360deg)}}.jvs-docx-viewer__container[data-v-ebacf228] .docx-wrapper{background-color:#f1f5f9;padding:24px 16px 40px;display:flex;flex-direction:column;align-items:center;min-height:100%}.jvs-docx-viewer__container[data-v-ebacf228] .docx-wrapper>section.docx{background-color:#fff;box-shadow:0 4px 16px #0f172a14,0 1px 3px #0f172a0a;border-radius:2px;margin-bottom:20px;padding:72pt 90pt}.jvs-docx-viewer__container[data-v-ebacf228] section.docx p[class*=docx-num-]:before{white-space:pre;margin-right:4pt}.jvs-docx-viewer__container[data-v-ebacf228] section.docx table{max-width:100%}.jvs-docx-viewer__container[data-v-ebacf228] section.docx img{max-width:100%}
1
+ .jvs-docx-viewer[data-v-34e07d63]{position:relative;width:100%;height:100%;min-height:360px;background-color:#f1f5f9;overflow:hidden;display:flex;flex-direction:column}.jvs-docx-viewer__container[data-v-34e07d63]{flex:1;width:100%;height:100%;overflow:auto}.jvs-docx-viewer__overlay[data-v-34e07d63]{position:absolute;top:0;right:0;bottom:0;left:0;z-index:5;background-color:#f1f5f9;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:32px;color:#64748b;text-align:center;-webkit-user-select:none;user-select:none}.jvs-docx-viewer__overlay--error[data-v-34e07d63]{color:#ef4444}.jvs-docx-viewer__empty-icon[data-v-34e07d63]{display:flex;align-items:center;justify-content:center;width:76px;height:76px;border-radius:16px;background-color:#e2e8f0;color:#64748b;margin-bottom:16px}.jvs-docx-viewer__state-title[data-v-34e07d63]{margin:0 0 6px;font-size:15px;font-weight:600;color:#334155}.jvs-docx-viewer__overlay--error .jvs-docx-viewer__state-title[data-v-34e07d63]{margin-top:12px;color:#dc2626}.jvs-docx-viewer__state-desc[data-v-34e07d63]{margin:0;font-size:13px;color:#94a3b8;max-width:440px;line-height:1.6}.jvs-docx-viewer__state-text[data-v-34e07d63]{margin:14px 0 0;font-size:13px;color:#64748b}.jvs-docx-viewer__spinner[data-v-34e07d63]{width:32px;height:32px;border:3px solid #cbd5e1;border-top-color:#2563eb;border-radius:50%;animation:jvs-docx-spin-34e07d63 .75s linear infinite}@keyframes jvs-docx-spin-34e07d63{to{transform:rotate(360deg)}}.jvs-docx-viewer__container[data-v-34e07d63] .docx-wrapper{background-color:#f1f5f9;padding:24px 16px 40px;display:flex;flex-direction:column;align-items:center;min-height:100%}.jvs-docx-viewer__container[data-v-34e07d63] .docx-wrapper>section.docx{background-color:#fff;box-shadow:0 4px 16px #0f172a14,0 1px 3px #0f172a0a;border-radius:2px;margin-bottom:20px;padding:72pt 90pt}.jvs-docx-viewer__container[data-v-34e07d63] section.docx p[class*=docx-num-]:before{white-space:pre;margin-right:4pt}.jvs-docx-viewer__container[data-v-34e07d63] section.docx table{max-width:100%}.jvs-docx-viewer__container[data-v-34e07d63] section.docx img{max-width:100%}