原生js预览ofd文件

文章目录

- 进入正文

在线 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"
}

没错，执行它npm run lib

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

打开demo.html我们会发现，其内容异常简单，有用的代码就一行，即：<script src="./ofd.umd.js"></script>，这告诉我们，如果我们要用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>
```

然后，定义一个[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>

最后就是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);
        }
    });
}

到此为止，原生js渲染ofd就完成了。

有些时候网上给出的某些函数的用法，可能会与我们再实际使用的时候有些冲突，遇到那个函数不会用，直接去ofd.umd.js中去搜索对应的函数名，看看用法即可。