原生js预览ofd文件

原生js预览ofd文件
文章目录
- 进入正文
  第一步-Clone
  第二步-build
  第三步-集成
在线 DEMO： Javascript preview ofd

我从网上看了好多文章，基本都是互抄的，但是，也给了我一个入门的提示，最起码知道ofd的基本用法。

如果是vue中集成ofd预览，那就没啥说的，网上的方法大概率就可以，直接集成git仓库中的utils文件即可。

那要是使用原生js集成呢？直接把Utils搬过来？保准不行。

有人说使用ofd.js的cdn，直接引入即可，好家伙，还是报错。

接下来，经过亲身实践，我来给各位提供一个可行的原生js预览ofd文件的方法.

仔细想想，如果原生js都能预览了，那距离到使用vue这种框架中集成还远吗？vue中不会使用原生js的包？不会吧不会吧！

进入正文

 第一步-Clone

打开GitHub或者Gitee，那个有账号用哪个，因为要下载包。

ofd-github ofd-gitee

然后，将项目clone下来。

然后，然后就是常规操作了兄弟：
- 编辑器打开项目，下载项目依赖npm install
- 看package.json，运行项目应该是npm run serve，具体以实际的package.json中的script脚本为准。
如果能运行起来，那就说明OK，依赖下载什么的没得问题。

第二步-build

重要的步骤来了，package.json中有一行脚本：
```
"scripts": {
	"lib": "vue-cli-service build --target lib --name ofd --dest lib ./src/utils/ofd/ofd.js"
}
1
2
3
```
没错，执行它npm run lib

脚本执行完成后，会自动在项目根目录下生成一个lib文件夹，里面是打包后ofd的js文件，以及一个demo.html。

打开demo.html我们会发现，其内容异常简单，有用的代码就一行，即：，这告诉我们，如果我们要用ofd.js，那你就需要在你的html文件内引入ofd.umd.js文件。

OK，接下来就是写代码时间了。

第三步-集成

怎么集成？
- 首先，将打包后的lib文件夹，整个搬迁到我们的项目下。
- 在html文件中，引入ofd.umd.js 或者 ofd.umd.min.js
```
<script src="./lib/ofd/ofd.umd.min.js">script>
1
```
- 然后，定义一个[type=file]Input来选择ofd文件，再定义一个容器，用来展示渲染的ofd文件
```
<body>
    <input type="file" ref="file" class="hidden" accept=".ofd" onchange="fileChanged(event)" />
    <div id="ofdContainer" style="width:100%;height:800px;">div>
body>
1
2
3
4
```
- 最后就是js了
```
function fileChanged(e) {
    // 获取文件数据
    const file = e.target.files[0];
    // 转换ofd文档
    ofd.parseOfdDocument({
        ofd: file,
        success: function (res) {
            const screenWidth = 800;
            const ofdRenderRes = ofd.renderOfd(screenWidth, res[0]);
            let ofdContainerDiv = document.getElementById('ofdContainer');
            // 清空元素
            ofdContainerDiv.innerHTML = '';
            for (const item of ofdRenderRes) {
                ofdContainerDiv.appendChild(item);
            }
        },
        fail: function(err){
            console.error('ofd文件渲染失败',err);
        }
    });
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
```
到此为止，原生js渲染ofd就完成了。

有些时候网上给出的某些函数的用法，可能会与我们再实际使用的时候有些冲突，遇到那个函数不会用，直接去ofd.umd.js中去搜索对应的函数名，看看用法即可。
相关阅读:
基于STM32智能门禁系统（阿里云）_2022
社区系统项目复盘-4
# 聚类系列(一)——什么是聚类？
并行计算总结
 基本的SELECT语句——“MySQL数据库”
小程序数据请求的方式和注意事项
 Spring Boot Actuator - Spring Boot 应用监控
 解决vue-cli node-sass安装不成功问题
 二维码怎么分解成链接？线上快速解码教学
 毕业设计基于STM32单片机的二轮平衡小车
原文地址：https://blog.csdn.net/s_y_w123/article/details/127545928

文章目录

进入正文

第一步-Clone

第二步-build

第三步-集成