OFD 前端展示

VUE2

1 先安装 npm i ofd.js

VUE3

需求接口是base64的OFD文件 前端展示 啊....弄了一天多 才调出来 下面记录一下

1 我分别用了 ofdview, cafe-ofd, ofd.js 各种插件 都去官网下了demo 只有ofd.js 好使，其他的没研究明白 一直报错
我一开始用的vue2 但是ofd.js一直无法引用进去 从网上也查不到什么好的方法 后来换成vue3 就好了

图片.png

这两个文件里面的js 是要导入的 vue2 就直接报错了

2 接口是base64的 file是无法直接读取的 然后我就开始base64、 blob 、file 、arraybuffer 直接无限循环转换 浪费了好多时间
先转了 blob 不行

let base64EncodedData = res.data;(返回的base64)
const byteCharacters = atob(base64EncodedData);
const byteNumbers = new Array(byteCharacters.length);
for (let i = 0; i < byteCharacters.length; i++) {
     byteNumbers[i] = byteCharacters.charCodeAt(i);
}
const byteArray = new Uint8Array(byteNumbers);
const fileBlob = new Blob([byteArray], { type: 'application/octet-stream' });
console.log(fileBlob)

然后是二进制也不行

 // 将base64编码解码成二进制数据
 const byteCharacters = atob(res.data);
 const byteNumbers = new Array(byteCharacters.length);
 for (let i = 0; i < byteCharacters.length; i++) {
    byteNumbers[i] = byteCharacters.charCodeAt(i);
 }
 const uInt8Array = new Uint8Array(byteNumbers);
 console.log(byteArray)

然后是file 也不行！！！ 但是本地直接读取的是file 放在接口里面 就不行了 这块就以为是转错了 对照了半天 发现确实是不行

/const byteCharacters = atob(base64EncodedData);
const byteNumbers = new Array(byteCharacters.length);
const byteArray = new Uint8Array(byteNumbers);
for (let i = 0; i < byteCharacters.length; i++) {
    byteNumbers[i] = byteCharacters.charCodeAt(i);
}
const fileBlob = new File([byteArray], "ofd.ofd",{ type: 'application/ofd' });
console.log(fileBlob)

最后接口里面支持的格式是ArrayBuffer 这样可以！！！！

var binary_string = window.atob(base64EncodedData);
    var len = binary_string.length;
    var bytes = new Uint8Array(len);
    for (var i = 0; i < len; i++) {
        bytes[i] = binary_string.charCodeAt(i);
    }
let file= bytes.buffer;
console.log(file)

直接从官网下demo: https://github.com/DLTech21/ofd.js
参考文章：https://blog.csdn.net/zhangyoude123/article/details/127998841?spm=1001.2101.3001.6650.4&utm_medium=distribute.pc_relevant.none-task-blog-2%7Edefault%7ECTRLIST%7ERate-4-127998841-blog-127545928.235%5Ev32%5Epc_relevant_increate_t0_download_v2&depth_1-utm_source=distribute.pc_relevant.none-task-blog-2%7Edefault%7ECTRLIST%7ERate-4-127998841-blog-127545928.235%5Ev32%5Epc_relevant_increate_t0_download_v2&utm_relevant_index=7

https://blog.csdn.net/zhangyoude123/article/details/127998841?spm=1001.2101.3001.6650.4&utm_medium=distribute.pc_relevant.none-task-blog-2%7Edefault%7ECTRLIST%7ERate-4-127998841-blog-127545928.235%5Ev32%5Epc_relevant_increate_t0_download_v2&depth_1-utm_source=distribute.pc_relevant.none-task-blog-2%7Edefault%7ECTRLIST%7ERate-4-127998841-blog-127545928.235%5Ev32%5Epc_relevant_increate_t0_download_v2&utm_relevant_index=7

最终代码：