WEB：探索开源OFD.js技术应用

1、简述

OFD.js 是一个由开源社区维护的 JavaScript 库，专注于在浏览器中渲染和处理 OFD 文件。OFD 作为一种开放式的文档格式，被广泛应用于电子政务、电子合同等领域。OFD.js 的出现为开发者提供了一个强大的工具，使得在前端实现 OFD 文件的展示和交互变得更加简单和灵活。

2、技术特点

• OFD 标准支持
  OFD.js 严格遵循 OFD 标准，能够准确解析 OFD 文件，实现对各种 OFD 版本和规范的兼容性。

• 基于 Web 技术
  OFD.js 利用 HTML5、Canvas 等标准的 Web 技术，实现在浏览器中高效渲染 OFD 文件。这种基于 Web 的设计使得 OFD.js 具备良好的跨平台性和兼容性。

• 多层次渲染
  OFD 文件通常包含多个层次的图形元素，例如文字、图片、矢量图等。OFD.js 提供了多层次的渲染能力，确保在展示 OFD 文件时保持图像的清晰和准确。

• 交互性
  OFD.js 支持对 OFD 文件中的交互元素进行处理，如超链接、表单等，使得用户能够在浏览器中更加直观地与 OFD 文件进行交互。

3、下载

OFD.js 作为一个开源项目，得到了全球开发者社区的关注和支持。这意味着你可以从开源社区中获得反馈、解决问题，并参与到 OFD.js 的开发和改进中。 网络上的版本很多，但是真正一直维护的比较少，这边推荐的也是比较经常维护的：

Gitee 地址：https://gitee.com/Donal/ofd.js

直接点击下载或者通过git指令下载：

git clone https://gitee.com/Donal/ofd.js.git
1

当前ofd预览有些以图片为主的ofd文件兼容性不是很好，如果有遇到这种Ofd无法打开可以使用以下开源插件：

git clone https://gitee.com/gaoxingzaq/ofdview.git
1

这个有水印和页数限制，能不能破解看你自己了哈，都是js脚本。

4、应用

OFD.js 设计简洁，以轻量化为目标，使得在浏览器中加载和渲染 OFD 文件时能够保持高性能。首先要在本地安装Nodejs环境。

4.1 本地打开

通过npm指令来运行当前vue的页面UI:

npm install
1

然后通过run指令来运行：

npm run serve
1

运行完成后，通过当前提供的地址访问：http://localhost:8080/ofd/

4.2 OFD.js库

• 引入OFD.js 库
  首先在项目VUE引入OFD.js的JavaScript文件：

import {parseOfdDocument, renderOfd, renderOfdByScale, digestCheck, getPageScale, setPageScale} from "@/utils/ofd/ofd";
import * as JSZipUtils from "jszip-utils";
1
2

• 解析
  通过OFD提供的parseOfdDocument方法来解析当前OFD文件：

let that = this;
let t = new Date().getTime();
this.loading = true;
parseOfdDocument({
  ofd: file,
  success(res) {
    that.ofdObj = res[0];//OfD对象
    that.pageCount = res[0].pages.length;
    //渲染当前OFD文件到前端DIV上
    const divs = renderOfd(screenWidth, res[0]);
    that.displayOfdDiv(divs);
    that.loading = false;
  },
  fail(error) {
    that.loading = false;
    that.$alert('OFD打开失败', error, {
      confirmButtonText: '确定',
      callback: action => {
        this.$message({
          type: 'info',
          message: `action: ${ action }`
        });
      }
    });
  }
});
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

• 缩放
  通过 getPageScale, setPageScale来获取和设置当前缩放值，然后重新去渲染当前OFD对象：

//this.ofdObj上面保存解析后的OFD对象
setPageScale(++this.scale);
const divs = renderOfdByScale(this.ofdObj);
this.displayOfdDiv(divs);
1
2
3
4

• 页切换
  当前页的切换主要是通过DIV容器子节点列表下标来切换：

let contentDiv = document.getElementById('content');
let ele = contentDiv.children.item(this.pageIndex-2);
ele?.scrollIntoView(true);
ele?this.pageIndex=this.pageIndex-1:'';
1
2
3
4

5、结语

OFD.js 作为一个开源的前端 OFD 文件渲染库，通过其对 OFD 标准的支持、基于 Web 技术的设计、轻量化的特点以及开源社区的支持，为开发者提供了一个优秀的工具，使得在浏览器中处理和展示 OFD 文件变得更加简便和高效。如果你正在寻找一个可靠的前端 OFD 文件渲染解决方案，OFD.js 绝对值得你深入了解和尝试，为你的项目带来更好的体验和灵活性。