{"id":23864374,"url":"https://github.com/signitdoc/liteofd","last_synced_at":"2025-10-16T16:32:43.256Z","repository":{"id":229545018,"uuid":"777011517","full_name":"SignitDoc/liteofd","owner":"SignitDoc","description":"This is a ofd file parse and render util","archived":false,"fork":false,"pushed_at":"2024-11-27T10:56:36.000Z","size":43464,"stargazers_count":33,"open_issues_count":1,"forks_count":4,"subscribers_count":3,"default_branch":"master","last_synced_at":"2024-12-24T19:19:28.945Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"apache-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/SignitDoc.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null},"funding":{"github":null,"patreon":null,"open_collective":null,"ko_fi":null,"tidelift":null,"community_bridge":null,"liberapay":null,"issuehunt":null,"otechie":null,"custom":null}},"created_at":"2024-03-25T02:31:26.000Z","updated_at":"2024-12-23T03:20:14.000Z","dependencies_parsed_at":"2024-10-21T04:52:09.354Z","dependency_job_id":null,"html_url":"https://github.com/SignitDoc/liteofd","commit_stats":null,"previous_names":["xxss0903/liteofd"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/SignitDoc%2Fliteofd","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/SignitDoc%2Fliteofd/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/SignitDoc%2Fliteofd/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/SignitDoc%2Fliteofd/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/SignitDoc","download_url":"https://codeload.github.com/SignitDoc/liteofd/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":232309081,"owners_count":18503203,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2025-01-03T08:21:16.439Z","updated_at":"2025-10-16T16:32:43.251Z","avatar_url":"https://github.com/SignitDoc.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# LiteOfd 类方法说明文档\n\n版本：0.2.6\n\n## 1. 简介\n\nLiteOfd 是一个用于处理 OFD（Open Fixed-layout Document）文件的轻量级库。它提供了解析、渲染和操作 OFD 文档的功能，使开发者能够在 Web 应用中轻松展示和操作 OFD 文档。\u003cbr\u003e\n\n## 在线演示\n\n🔗 **Demo**: [https://signitdoc.github.io/liteofd/](https://signitdoc.github.io/liteofd/)\n\n## 1.1示例图片\n\n以下是一个OFD文档渲染的示例图片:\n\n![OFD渲染示例](public/demo1.png)\n文档渲染\n![OFD渲染示例](public/demo2.png)\n发票渲染\n\n该图片展示了使用LiteOfd库渲染OFD文档的效果。您可以看到文档内容被准确地呈现,包括文本、图形和布局等元素。\n\n## 1.2 基础使用示例\n使用npm安装\n```bash\nnpm install liteofd\n```\n\n`注意：目前打包遇到问题，发布到npm之后字体文件因为无法正确加载导致渲染字体可能出现问题，所以建议源码引入。另外如果有人愿意贡献打包脚本，可以联系我。QQ：897761547，谢谢！或者帮忙修改打包脚本，提PR。`\n\n步骤是将OFD文档解析之后调用渲染方法，然后将渲染结果添加到显示组件中\n```Typescript\nimport { LiteOfd } from 'liteofd'\n\nfunction parseOfdFile(file: File) {\n  const liteOfd = new LiteOfd()\n  let appContent = getElementById(\"ofd-content\")\n\tappContent.innerHTML = ''\n    liteOfd.parse(file).then((data: OfdDocument) =\u003e {\n    console.log('解析OFD文件成功:', data);\n      let ofdDiv = liteOfd.render(undefined, 'background-color: white; margin-top: 12px;')\n      appContent.appendChild(ofdDiv) // \n  }).catch((error) =\u003e {\n    console.error('解析OFD文件失败:', error);\n  });\n}\n```\n\n## 2. 使用方法\n\n### 2.1   async parse(file: string | File | ArrayBuffer): Promise\u003cOfdDocument\u003e\n\n描述：解析上传的 OFD 文件。\n\n参数：\n- file: File - 用户上传的 OFD 文件对象\n\n返回值：\n- Promise\u003cOfdDocument\u003e：一个 Promise，解析成功后返回 OfdDocument 对象\n\n示例：\n```typescript\nconst fileInput = document.getElementById('fileInput') as HTMLInputElement;\nconst file = fileInput.files?.[0];\nif (file) {\n  liteOfd.parseFile(file).then((data: OfdDocument) =\u003e {\n    console.log('解析OFD文件成功:', data);\n  }).catch((error) =\u003e {\n    console.error('解析OFD文件失败:', error);\n  });\n}\n```\n\n### 2.2   render(container?: HTMLDivElement, pageWrapStyle?: string): HTMLDivElement\n\n描述：渲染 OFD 文档。\n\n返回值：\n- HTMLDivElement：渲染后的 div 元素\n\n示例：\n```typescript\nlet renderDiv = liteOfd.render(undefined, 'background-color: white; margin-top: 12px;')\ndocument.getElementById('content').appendChild(renderDiv);\n```\n\n### 2.3 getCurrentPageIndex(): number\n\n描述：获取当前页面索引。\n\n返回值：\n- number：当前页面的索引\n\n示例：\n```typescript\nconst currentPage = liteOfd.getCurrentPageIndex();\nconsole.log(`当前页面：${currentPage}`);\n```\n\n### 2.4 getTotalPages(): number\n\n描述：获取文档总页数。\n\n返回值：\n- number：文档的总页数\n\n示例：\n```typescript\nconst totalPages = liteOfd.getTotalPages();\nconsole.log(`总页数：${totalPages}`);\n```\n\n### 2.5 nextPage()\n\n描述：跳转到下一页。\n\n示例：\n```typescript\nliteOfd.nextPage();\n```\n\n### 2.6 prevPage()\n\n描述：跳转到上一页。\n\n示例：\n```typescript\nliteOfd.prevPage();\n```\n\n### 2.7 scrollToPage(pageIndex: number)\n\n描述：滚动到指定页面。\n\n参数：\n- pageIndex: number - 目标页面索引\n\n示例：\n```typescript\nliteOfd.scrollToPage(1); // 跳转到第一页\n```\n\n### 2.8 zoomIn()\n\n描述：放大文档。\n\n示例：\n```typescript\nliteOfd.zoomIn();\n```\n\n### 2.9 zoomOut()\n\n描述：缩小文档。\n\n示例：\n```typescript\nliteOfd.zoomOut();\n```\n\n### 2.10 resetZoom()\n\n描述：重置文档缩放比例。\n\n示例：\n```typescript\nliteOfd.resetZoom();\n```\n\n### 2.11 searchText(keyword: string)\n\n描述：搜索文档中的关键词。\n\n参数：\n- keyword: string - 要搜索的关键词\n\n示例：\n```typescript\nliteOfd.searchText(\"示例关键词\");\n```\n\n### 2.12 getContent(page?: number): string\n\n描述：获取指定页面或全文的文本内容。\n\n参数：\n- pageIndex: number | null - 页面索引，如果为 null 则获取全文\n\n返回值：\n- string：指定页面或全文的文本内容\n\n示例：\n```typescript\nconst content = liteOfd.getContentText(null);\nconsole.log(\"文档内容:\", content);\n```\n\n### 2.13 executeAction(action: XmlData)\n\n描述：执行指定的动作（如跳转到特定页面）。\n\n参数：\n- action: XmlData - 要执行的动作数据\n\n示例：\n```typescript\n// 假设 action 是从大纲数据中获取的\nliteOfd.executeAction(action);\n```\n\n## 3. 事件监听\n\nLiteOfd 类会触发一些自定义事件，您可以监听这些事件来执行相应的操作：\n\n### 3.1 ofdPageChange 事件\n\n描述：当 OFD 文档页面发生变化时触发。\n\n示例：\n```typescript\nwindow.addEventListener('ofdPageChange', (event: CustomEvent) =\u003e {\n  // 更新页面信息显示\n  updatePageInfo();\n});\n```\n\n### 3.2 signature-element-click 事件\n\n描述：当点击签名元素时触发。\n\n示例：\n```typescript\nappContent.addEventListener('signature-element-click', (event: CustomEvent) =\u003e {\n  const { nodeData, sealObject } = event.detail;\n  console.log('Clicked Signature Element:', nodeData);\n  console.log('Seal Object:', sealObject);\n  // 显示签名详情\n  displaySignatureDetails(nodeData, sealObject);\n});\n```\n\n\n## 3.3 字段说明\n### 3.3.1 OfdDocument字段\n| 字段名 | 类型 | 描述 |\n|--------|------|------|\n| files | any | OFD解析出来的所有文件，即ZIP解压缩后的原始文件，包含文件路径 |\n| data | any | 解析的OFD数据，XmlData类型 |\n| pages | XmlData[] | OFD的页面数据数组 |\n| ofdXml | XmlData | OFD.xml文件数据 |\n| documentData | XmlData | document.xml文件数据 |\n| publicRes | XmlData | publicres.xml文件数据 |\n| documentRes | XmlData | documentRes.xml文件数据 |\n| rootContainer | Element | 根容器，HTMLDivElement类型 |\n| loadedMediaFile | Map\u003cstring, any\u003e | 已加载的资源图片，包括图片等 |\n| mediaFileList | any | 多媒体文件列表 |\n| signatures | XmlData | 签名数据，signatures.xml文件的数据 |\n| signatureList | XmlData[] | 签名数据列表，包含signatures.xml中所有签名组成的XmlData数组 |\n| outlines | XmlData | 大纲数据列表，包含ofd:Outlines中所有大纲数据 |\n| annots | XmlData | 注释数据列表，包含ofd:Annotations中的数据 |\n\n### 3.3.2 XmlData字段\n| 字段名 | 类型 | 描述 |\n|--------|------|------|\n| attrsMap | Map\u003cstring, any\u003e | 属性值映射 |\n| children | XmlData[] | 子标签数组 |\n| value | string | 标签中的值 |\n| tagName | string | 标签的名称 |\n| fileName | string | XML文件的路径和名称 |\n| id | string | 节点的ID属性值 |\n| signList | XmlData[] | 页面包含的签名数组 |\n| sealObject | any | 签名的数据，印章数据（如signedvalue.data中的数据） |\n| sealData | OfdDocument \\| string \\| null | OFD类型签章的数据或图片的base64数据 |\n| annots | XmlData \\| null | 注释数据列表，包含ofd:Annotations |\n\n\n## 4. 注意事项\n\n- 在使用 LiteOfd 类的方法之前，请确保已经成功解析了 OFD 文件。\n- 某些方法（如 nextPage、prevPage 等）可能会触发 ofdPageChange 事件，请根据需要添加相应的事件监听器。\n- 对于大型 OFD 文件，解析和渲染可能需要一些时间，建议添加适当的加载提示。\n\n\n## Star\n[![Stargazers over time](https://starchart.cc/xxss0903/liteofd.svg?variant=adaptive)](https://starchart.cc/xxss0903/liteofd)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsignitdoc%2Fliteofd","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsignitdoc%2Fliteofd","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsignitdoc%2Fliteofd/lists"}