2023年12月8日发(作者：)
OFD格式在线浏览开发实现
一，需求背景
OFD是一种新研发的国产化版式文件格式，相当于国产PDF文件，目前使用率比较低，相关的技术资料也非常有限。但为了适应国产化电子
文件在线浏览需求，现需要在NetCore新系统中增加OFD格式文件的在线浏览功能。要对该格式文件进行支持。
二，实现方案
目前找到的在线浏览OFD格式文件的最优方案就是使用框架，调用其内部封装好的一些方法来前台处理和渲染OFD格式文件。当然同
时也需要NetCore提供后台接口，来返回需要在线浏览的OFD文件流，来为前端提供数据源。其中的主要作用就是将后台返回的
ofd文件流进行解析，然后最终通过一个div元素作为容器将解析后的html按照页数逐页添加进来进行展示；
三，前端Vue项目集成
1，将utils文件夹目录直接拷贝至Vue项目的src目录下，并使用VSCode工具打开前端vue项目；
2，在文件中添加对必要封装方法的引入代码：
import {parseOfdDocument, renderOfd} from "@/utils/ofd/ofd";
3，为了让整个前端项目全局都可以使用到提供的封装方法，需要添加申明全局属性的代码：
ype.$parseOfdDocument=parseOfdDocument;
ype.$renderOfd=renderOfd;
这样在前端项目的任何页面都可以通过this.$parseOfdDocument()来调用申明的全局方法了；
4，目前为止已基本引入，但还缺少很多相关依赖项包，如果项目之前没安装过这些包，那么此时在执行npm run dev启动项目时，会
报很多缺少依赖包的错误。这时如果有外网的情况，可以通过npm install --save XXX 的终端指令来根据错误提示在线安装所缺少的依赖
包。比如我在集成时额外安装了以下依赖包：
npm install --save @lapo/asn1js
npm install --save core-js
npm install --save js-md5
npm install --save js-sha1
npm install --save jsrsasign
npm install --save jszip
npm install --save jszip-utils
npm install --save ofd-xml-parser
npm install --save sm-crypto
npm install --save web-streams-polyfill
5，以上缺失的依赖包都安装成功后，vue前端项目就可以正常运行了。在具体浏览OFD文件的页面文件中，首先定义一个
6，在JS方法中调用封装函数：
this.$parseOfdDocument({
ofd: file,
success(res) {
const divs = that.$renderOfd(screenWidth, res[0]);
yOfdDiv(divs);
},
fail(error) {
alert(error);
}
});
parseOfdDocument函数中file作为ofd文件的参数，这里我传递的file参数为要请求的后台接口地址
url（'localhost:54451/api/OnlineView/GetFileBytes?filename='+filename），该后台接口向前台返回的是文件流的形式。如果后台接
口返回文件流无异常，则会进入success成功回调函数中，反之进入fail失败回调中；
renderOfd函数中要传递两个参数，第一个是调用parseOfdDocument函数成功回调所返回的数据，第二个是展示OFD文件时所需的宽度值
（一般使用自适应动态计算显示宽度）。该函数的作用主要是将文件数据进行处理 解析成一个数组，OFD文件每个页面都作为该数组中的
一个元素；
7，接下来就是将解析后的数组数据通过JS遍历方式去加载到上面定义的div容器中：
displayOfdDiv(divs) {
let contentDiv = mentById('divId');TML = '';
for (const div of divs) {
Child(div);
}
}
这样就完成了前端页面JS部分的加载和渲染展示的过程；
四，NetCore后端接口
[Route("GetFileBytes")]
[HttpGet]
public IActionResult GetFileBytes(string filename)
{
string path = rentDirectory() + "/wwwroot/" + filename;
if ((path))
{
Stream stream = new FileStream(path, );
return File(stream, "application/ofd");
}
else
{
return null;
}
}
后台正常逻辑就是先获取到OFD文件的stream流或者byte[]二进制数组，然后向前端返回 File() 或者 FileStreamResult() 数据即可；
需要utils包的可以留言发给大家。
发布评论