EasyOFD — 纯 JavaScript 实现的 OFD 文档浏览器渲染引擎
一、引言
在电子政务、财务票据、档案管理等场景中，OFD（Open Fixed-layout Document）格式正逐渐成为中国电子文档的主流标准。作为 GB/T 33190-2016 国家标准，OFD 与 PDF 类似，但更贴合国内业务需求。
然而，浏览器原生并不支持 OFD 预览。传统方案往往依赖后端转换或第三方插件，部署复杂且体验不佳。EasyOFD 应运而生 —— 这是一个纯 JavaScript 实现的 OFD 浏览器渲染引擎，无需任何后端服务，直接在浏览器中使用 HTML Canvas 完成 OFD 文件的解析与渲染。
二、项目概述
EasyOFD 是一个轻量级、高性能的 OFD 文档查看器，具有以下核心特性：
- 纯前端实现：不依赖任何后端服务，所有解析和渲染都在浏览器端完成
- 高性能渲染：基于 HTML Canvas，支持多页连续渲染与虚拟滚动
- 丰富的交互功能：
- 缩放控制（滑块 + 按钮，25% ~ 300%）
- 页面导航（首页、上一页、下一页、末页、跳转指定页）
- 三种视图模式（单页、连续、双页）
- 打印功能（自动适配 OFD 页面尺寸）
- 文字内容复制（透明文字层）
- 开箱即用：打包后自包含 CSS 样式，无需额外配置
- 符合国家标准：完整实现 GB/T 33190-2016 核心章节
三、标准合规性
EasyOFD 严格遵循 GB/T 33190-2016 国家标准实现，以下是核心章节的覆盖情况：
| 标准章节 | 功能模块 | 实现状态 |
|---|---|---|
| §5 文件总体结构 | ZIP 解包、XML 解析、OFD.xml 读取 | ✅ 已完成 |
| §7 文档结构 | Document.xml、Page、Layer、PageBlock | ✅ 已完成 |
| §7.16 签名 | 电子印章（2014/2020 版 TLV 格式） | ✅ 已完成 |
| §7.17 注释 | PageAnnot、Annot、Appearance | ✅ 已完成 |
| §8 图形设计 | Path、Arc、Color、DrawParam | ✅ 已完成 |
| §10 文字处理 | Text、Font、TextCode、CGTransform | ✅ 已完成 |
| §11 多媒体 | MultiMedia（Image/Video/Audio） | ✅ 已完成 |
| §15 签名 | Signatures、Signature、SealFile | ✅ 已完成 |
此外，项目还实现了 CTM 坐标变换矩阵、底纹（Pattern）、颜色空间（ColorSpace）等高级特性的基础解析，部分渲染功能持续完善中。
四、快速上手
方式一：Vue 3 项目中使用
1. 创建 Vue 3 项目
npm create vue@latest
cd your-project
npm install
npm run dev
2. 安装 EasyOFD 及依赖
# 安装依赖库
npm i jszip x2js jb2 opentype.js
# 安装 EasyOFD
npm i easyofd
3. 创建 OFD 组件
在 src/components/ 目录下创建 UseOfd.vue：
<script setup>
import EasyOFD from "easyofd";
import { onMounted } from 'vue'
onMounted(() => {
let yourElement = document.getElementById("1111111");
let ofd = new EasyOFD('myofdID', yourElement);
})
</script>
<template>
<div id="1111111"></div>
</template>
4. 在 App.vue 中引入组件
<script setup>
import UseOfd from './components/UseOfd.vue'
</script>
<template>
<main>
<UseOfd />
</main>
</template>
5. 异步加载远程 OFD 文件
如需从服务器加载 OFD 文件，先安装 axios：
npm install axios
然后在组件中添加加载逻辑：
<script setup>
import EasyOFD from "easyofd";
import { onMounted } from 'vue'
import axios from 'axios'
let ofd;
onMounted(() => {
let yourElement = document.getElementById("1111111");
ofd = new EasyOFD('myofdID', yourElement);
// 从远程服务器加载 OFD 文件
axios.get('http://your-server/files/document.ofd', { responseType: 'blob' })
.then(response => {
const blob = new Blob([response.data], { type: 'application/octet-stream' });
ofd.loadFromBlob(blob);
})
.catch(error => {
console.error('获取文件失败:', error);
});
})
</script>
注意：远程加载需要服务器配置 CORS 跨域策略，本地调试环境无法直接加载远程文件。
方式二：纯 HTML 中使用
直接在 HTML 文件中引入 JS 文件即可：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>EasyOFD 示例</title>
</head>
<body>
<div id="container"></div>
<!-- 引入依赖库 -->
<script src="https://your-cdn/jszip.min.js"></script>
<script src="https://your-cdn/x2js.js"></script>
<script src="https://your-cdn/jb2.js"></script>
<script src="https://your-cdn/opentype.js"></script>
<!-- 引入 EasyOFD -->
<script src="./easyofd.js"></script>
<script>
// 创建实例
const ofd = new EasyOFD('myofdID', document.getElementById('container'));
</script>
</body>
</html>
API 说明
| 方法 | 说明 |
|---|---|
new EasyOFD(id, parent) |
创建实例，id 为实例标识，parent 为挂载 DOM 元素 |
loadFromBlob(file) |
加载 OFD 文件（File 或 Blob 对象） |
FirstPage() |
跳转到第一页 |
PrePage() |
上一页 |
NextPage() |
下一页 |
LastPage() |
跳转到最后一页 |
ZoomIn() |
放大 |
ZoomOut() |
缩小 |
FitWidth() |
适应宽度 |
FitPage() |
适应页面 |
Print() |
打印文档 |
SetViewMode(mode) |
设置视图模式：'single'（单页）、'continuous'（连续）、'double'（双页） |
五、总结与展望
EasyOFD 作为一个纯前端的 OFD 渲染引擎，已经实现了 GB/T 33190-2016 标准的核心功能，能够满足大多数 OFD 文档的浏览器预览需求。
当前已实现的功能：
- OFD 文件解析与渲染
- 多页连续浏览与虚拟滚动
- 缩放、翻页、视图模式切换
- 文字选择与复制
- 打印功能
- 电子印章支持
未来优化方向：
- 完善底纹（Pattern）和裁剪（Clip）渲染
- 支持大纲（Outline）和书签（Bookmark）导航
- 优化 MM→PX 坐标转换逻辑的统一性
- 增加更多测试用例覆盖边缘场景
EasyOFD 采用 Apache 2.0 开源协议，欢迎对 OFD 标准感兴趣的开发者参与贡献。如果您在使用过程中遇到问题或有改进建议，欢迎提交 Issue 或 Pull Request。
关键词：OFD, GB/T 33190-2016, JavaScript, Canvas, 浏览器渲染, 电子文档, 开源库
更多推荐
7
0- 0
已为社区贡献1条内容
所有评论(0)