ofd.js

开发工具JavaScript

一个纯前端解析与渲染 OFD 文档的 JavaScript 库，基于 SVG 与 Canvas 实现，无需后端即可在浏览器中打开并显示 OFD 文件。提供解析文档、一次性渲染全部页面及按索引渲染指定页等接口，适用于电子发票、公文等 OFD 文件的网页预览场景。

AI/机器学习前端工具JavaScript

作者：用户6868语言：JavaScript更新：2026-10-27

仓库地址

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

前往原仓库

README

# ofd.js

### 在使用ofd.js前请务必悉知  [《ofd.js免责声明》](https://github.com/DLTech21/ofd.js/blob/master/%E5%85%8D%E8%B4%A3%E5%A3%B0%E6%98%8E.md)

![-](https://img.shields.io/badge/language-js-orange.svg) [![license](https://img.shields.io/badge/license-Apache--2.0-blue)](./LICENSE)

目前方案采用：svg及canvas渲染实现，百分百纯前端渲染

效果： 
![示例](https://web-code-img.oss-cn-shanghai.aliyuncs.com/readme/2ef71f900416a27474bad8da.jpg)

小程序OFD验签示例

![示例](https://web-code-img.oss-cn-shanghai.aliyuncs.com/readme/c97d60dfc90dd9df207cbb49.jpg)

微信

![示例](https://web-code-img.oss-cn-shanghai.aliyuncs.com/readme/4c35c84085f331c8a8292255.jpg)


```md
npm i ofd.js
```

#### 解析OFD文件
```
parseOfdDocument({
        ofd: ofdFile,
        success() {
            
        },
        fail(error){
            console.log(error)
        }
    })
```

#### 一次性渲染OFD对应文档的所有页，适合页数少
**此方法需要在parseOfdDocument success回调后使用**

| 参数        | 说明                                                           | 是否必填 |
| ----------- | ------------------------------------------------------------ | -------- |
| documentIndex   | ofd文档中document的索引，默认从0开始                              | 是       |
| width   | 预期渲染的宽度，像素值 ，如800                             | 否       |

```
const divs = renderOfd(documentIndex, width)
// do something
```

#### 渲染OFD对应文档的对应页
**此方法需要在parseOfdDocument success回调后使用**

| 参数        | 说明                                                           | 是否必填 |
| ----------- | ------------------------------------------------------------ | -------- |
| documentIndex   | ofd文档中document的索引，默认从0开始                              | 是       |
| pageIndex   | ofd文档中页码，默认从0开始                              | 是       |
| width   | 预期渲染的宽度，像素值 ，如800                             | 否       |

```
const div = renderOfdByIndex(documentIndex, pageIndex, width)
// do something

```

## ofd推荐项目
[OFD Reader & Writer](https://github.com/Trisia/ofdrw)

## 参与贡献
发挥人人为我，我为人人的优良传统，多做pr~~~

## Project setup
```
npm install
```

### Compiles and hot-reloads for development
```
npm run serve
```

### Compiles and minifies for production
```
npm run build
```

### Lints and fixes files
```
npm run lint
```

### Customize configuration
See [Configuration Reference](https://cli.vuejs.org/config/).

### 项目关注度

> 项目获得 Star曲线

[![Stargazers over time](https://starchart.cc/DLTech21/ofd.js.svg)](https://starchart.cc/DLTech21/ofd.js)