OFD格式在线浏览 开发实现
一,需求背景
OFD是一种新研发的国产化版式文件格式,相当于国产PDF文件,目前使用率比较低,相关的技术资料也非常有限。但为了适应国产化电子文件在线浏览需求,现需要在NetCore新系统中增加OFD格式文件的在线浏览功能。要对该格式文件进行支持。
二,实现方案
目前找到的在线浏览OFD格式文件的最优方案就是使用ofd.js框架,调用其内部封装好的一些方法来前台处理和渲染OFD格式文件。当然同时也需要NetCore提供后台接口,来返回需要在线浏览的OFD文件流,来为前端ofd.js提供数据源。其中ofd.js的主要作用就是将后台返回的ofd文件流进行解析,然后最终通过一个div元素作为容器将解析后的html按照页数逐页添加进来进行展示;
三,前端Vue项目集成ofd.js
1,将utils文件夹目录直接拷贝至Vue项目的src目录下,并使用VSCode工具打开前端vue项目;
2,在main.js文件中添加对ofd.js必要封装方法的引入代码:
import {parseOfdDocument, renderOfd} from "@/utils/ofd/ofd";
3,为了让整个前端项目全局都可以使用到ofd.js提供的封装方法,需要添加申明全局属性的代码:
Vue.prototype.$parseOfdDocument=parseOfdDocument;
Vue.prototype.$renderOfd=renderOfd;
这样在前端项目的任何页面都可以通过this.$parseOfdDocument()来调用申明的全局方法了;
4,目前为止ofd.js已基本引入,但还缺少很多相关依赖项包,如果项目之前没安装过这些包,那么此时在执行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文件的页面文件中,首先定义一个<div id="divId"></div>并指定ID。这个div就是稍后要展示OFD文件的容器;
6,在JS方法中调用ofd.js封装函数:
this.$parseOfdDocument({
ofd: file,
success(res) {
const divs = that.$renderOfd(screenWidth, res[0]);
that.displayOfdDiv(divs);
},
fail(error) {
alert(error);
}
});
parseOfdDocument函数中file作为ofd文件的参数,这里我传递的file参数为要请求的后台接口地址url('http://localhost:54451/api/OnlineView/GetFileBytes?filename='+filename),该后台接口向前台返回的是文件流的形式。如果后台接口返回文件流无异常,则会进入success成功回调函数中,反之进入fail失败回调中;
renderOfd函数中要传递两个参数,第一个是调用parseOfdDocument函数成功回调所返回的数据,第二个是展示OFD文件时所需的宽度值(一般使用自适应动态计算显示宽度)。该函数的作用主要是将文件数据进行处理 解析成一个数组,OFD文件每个页面都作为该数组中的一个元素;
7,接下来就是将解析后的数组数据通过JS遍历方式去加载到上面定义的div容器中:
displayOfdDiv(divs) {
let contentDiv = document.getElementById('divId');
contentDiv.innerHTML = '';
for (const div of divs) {
contentDiv.appendChild(div);
}
}
这样就完成了前端页面JS部分的加载和渲染展示的过程;
四,NetCore后端接口
[Route("GetFileBytes")]
[HttpGet]
public IActionResult GetFileBytes(string filename)
{
string path = Directory.GetCurrentDirectory() + "/wwwroot/" + filename;
if (System.IO.File.Exists(path))
{
Stream stream = new FileStream(path, FileMode.Open);
return File(stream, "application/ofd");
}
else
{
return null;
}
}
后台正常逻辑就是先获取到OFD文件的stream流或者byte[]二进制数组,然后向前端返回 File() 或者 FileStreamResult() 数据即可;
需要utils包的可以留言发给大家。
本文来自博客园,作者:zwbsoft,转载请注明原文链接:https://www.cnblogs.com/zwbsoft/p/14185229.html
电话微信:13514280351
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步