diff --git a/README.md b/README.md index 66e5717..225ba1e 100644 --- a/README.md +++ b/README.md @@ -6,9 +6,36 @@ LiteOfd 是一个用于处理 OFD(Open Fixed-layout Document)文件的轻量级库。它提供了解析、渲染和操作 OFD 文档的功能,使开发者能够在 Web 应用中轻松展示和操作 OFD 文档。 -## 2. 核心方法 +## 1.1示例图片 -### 2.1 parseFile(file: File): PromiseCapability +以下是一个OFD文档渲染的示例图片: + +![OFD渲染示例](public/demo1.png) +文档渲染 +![OFD渲染示例](public/demo2.png) +发票渲染 + +该图片展示了使用LiteOfd库渲染OFD文档的效果。您可以看到文档内容被准确地呈现,包括文本、图形和布局等元素。 + +## 1.2 基础使用示例 +步骤是将OFD文档解析之后调用渲染方法,然后将渲染结果添加到显示组件中 +```Typescript +function parseOfdFile(file: File) { + let appContent = getElementById("ofd-content") + appContent.innerHTML = '' + liteOfd.parse(file).then((data: OfdDocument) => { + console.log('解析OFD文件成功:', data); + let ofdDiv = liteOfd.render(undefined, 'background-color: white; margin-top: 12px;') + appContent.appendChild(ofdDiv) // + }).catch((error) => { + console.error('解析OFD文件失败:', error); + }); +} +``` + +## 2. 使用方法 + +### 2.1 async parse(file: string | File | ArrayBuffer): Promise 描述:解析上传的 OFD 文件。 @@ -16,15 +43,14 @@ LiteOfd 是一个用于处理 OFD(Open Fixed-layout Document)文件的轻量 - file: File - 用户上传的 OFD 文件对象 返回值: -- PromiseCapability:一个 Promise,解析成功后返回 OfdDocument 对象 +- Promise:一个 Promise,解析成功后返回 OfdDocument 对象 示例: ```typescript const fileInput = document.getElementById('fileInput') as HTMLInputElement; const file = fileInput.files?.[0]; if (file) { - let ofdPromise = liteOfd.parseFile(file); - ofdPromise.promise.then((data: OfdDocument) => { + liteOfd.parseFile(file).then((data: OfdDocument) => { console.log('解析OFD文件成功:', data); }).catch((error) => { console.error('解析OFD文件失败:', error); @@ -32,7 +58,7 @@ if (file) { } ``` -### 2.2 renderOfd(): HTMLDivElement +### 2.2 render(container?: HTMLDivElement, pageWrapStyle?: string): HTMLDivElement 描述:渲染 OFD 文档。 @@ -41,8 +67,8 @@ if (file) { 示例: ```typescript -const ofdDiv = liteOfd.renderOfd(); -document.getElementById('content').appendChild(ofdDiv); +let renderDiv = liteOfd.render(undefined, 'background-color: white; margin-top: 12px;') +document.getElementById('content').appendChild(renderDiv); ``` ### 2.3 getCurrentPageIndex(): number @@ -140,7 +166,7 @@ liteOfd.resetZoom(); liteOfd.searchText("示例关键词"); ``` -### 2.12 getContentText(pageIndex: number | null): string +### 2.12 getContent(page?: number): string 描述:获取指定页面或全文的文本内容。 @@ -200,8 +226,67 @@ appContent.addEventListener('signature-element-click', (event: CustomEvent) => { }); ``` + +## 3.3 字段说明 +### 3.3.1 OfdDocument字段 +| 字段名 | 类型 | 描述 | +|--------|------|------| +| files | any | OFD解析出来的所有文件,即ZIP解压缩后的原始文件,包含文件路径 | +| data | any | 解析的OFD数据,XmlData类型 | +| pages | XmlData[] | OFD的页面数据数组 | +| ofdXml | XmlData | OFD.xml文件数据 | +| documentData | XmlData | document.xml文件数据 | +| publicRes | XmlData | publicres.xml文件数据 | +| documentRes | XmlData | documentRes.xml文件数据 | +| rootContainer | Element | 根容器,HTMLDivElement类型 | +| loadedMediaFile | Map | 已加载的资源图片,包括图片等 | +| mediaFileList | any | 多媒体文件列表 | +| signatures | XmlData | 签名数据,signatures.xml文件的数据 | +| signatureList | XmlData[] | 签名数据列表,包含signatures.xml中所有签名组成的XmlData数组 | +| outlines | XmlData | 大纲数据列表,包含ofd:Outlines中所有大纲数据 | +| annots | XmlData | 注释数据列表,包含ofd:Annotations中的数据 | + +### 3.3.2 XmlData字段 +| 字段名 | 类型 | 描述 | +|--------|------|------| +| attrsMap | Map | 属性值映射 | +| children | XmlData[] | 子标签数组 | +| value | string | 标签中的值 | +| tagName | string | 标签的名称 | +| fileName | string | XML文件的路径和名称 | +| id | string | 节点的ID属性值 | +| signList | XmlData[] | 页面包含的签名数组 | +| sealObject | any | 签名的数据,印章数据(如signedvalue.data中的数据) | +| sealData | OfdDocument \| string \| null | OFD类型签章的数据或图片的base64数据 | +| annots | XmlData \| null | 注释数据列表,包含ofd:Annotations | + + + + ## 4. 注意事项 - 在使用 LiteOfd 类的方法之前,请确保已经成功解析了 OFD 文件。 - 某些方法(如 nextPage、prevPage 等)可能会触发 ofdPageChange 事件,请根据需要添加相应的事件监听器。 - 对于大型 OFD 文件,解析和渲染可能需要一些时间,建议添加适当的加载提示。 + + +## 5. 许可证 + +LiteOfd 使用 Apache License 2.0 许可证。 + +## 6. 许可证详情 + +Copyright 2024 LiteOfd Contributors + +Licensed under the Apache License, Version 2.0 (the "License"); +you may not use this file except in compliance with the License. +You may obtain a copy of the License at + + http://www.apache.org/licenses/LICENSE-2.0 + +Unless required by applicable law or agreed to in writing, software +distributed under the License is distributed on an "AS IS" BASIS, +WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. +See the License for the specific language governing permissions and +limitations under the License. + diff --git a/public/demo1.png b/public/demo1.png new file mode 100644 index 0000000..a25e749 Binary files /dev/null and b/public/demo1.png differ diff --git a/public/demo2.png b/public/demo2.png new file mode 100644 index 0000000..a1e43c6 Binary files /dev/null and b/public/demo2.png differ