一，需求背景
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包的可以留言發給大家。