ofdjs的使用

安装：

npm i ofd.js

引入：

import {parseOfdDocument, renderOfd} from "ofd.js";

核心代码：

getOfdFileData(file) {
      const that = this;
      parseOfdDocument({
        ofd: file, //file 可以为文件链接、上传的文件对象
        success(res) {
          //输出ofd每页的div
          const divs = renderOfd(that.screenWidth, res[0]);
          let contentDiv = document.getElementById("content");
          contentDiv.innerHTML = "";
          for (const div of divs) {
            contentDiv.appendChild(div);
          }
          for (let ele of document.getElementsByName("seal_img_div")) {
              this.addEventOnSealDiv(
                   ele,
                  JSON.parse(ele.dataset.sesSignature),
                  JSON.parse(ele.dataset.signedInfo)
              );
          }
        },
        fail(error) {
          console.log(error, "getOfd");
        }
      });
    }

响应式处理

ofd.js插件使用screenWidth设置屏幕宽度，这个宽度设置好了之后是固定，用浏览器进行模拟的时候，改变窗口的大小，ofd的展示不会随着窗口的改变而改变，其宽高一直都是固定不变的

解决办法

思考：从控制台可以找到对应的标签，首先想到的是，设置标签的style以覆盖原本的样式，并为了确保修改的样式层级更高，使用了!important来提升层级。然而，想法很美丽，现实很残酷，这样设置了css之后，完全没有生效，一点水花都没有，失败！

转换思路：第一种想法实验失败了，暂时又没有其他头绪，故，问大佬，然后身边的大佬用过这个插件的，没有，一个都没有，只能再继续问网课班的助教大佬，似乎也没有什么很好的办法。

终极想法：经过一夜的不处理，终于，在今天早上，看到了一句代码 for (const div of divs) { contentDiv.appendChild(div); }，这里似乎拿到了div标签啊，那要不用js去设置一下style看看。于是，出现了以下代码：

getOfdFileData(file) {
      const that = this;
      parseOfdDocument({
        ofd: file, //file 可以为文件链接、上传的文件对象
        success(res) {
          //输出ofd每页的div
          const divs = renderOfd(that.screenWidth, res[0]);
          let contentDiv = document.getElementById("content");
          contentDiv.innerHTML = "";
          for (const div of divs) {
            div.style.width = document.body.clientWidth;
            div.style.height = "auto";
            div.childNodes[0].style.width = document.body.clientWidth;
            div.childNodes[0].style.height = "36vh";
            div.childNodes[0].childNodes[0].style.width = document.body.clientWidth;
            div.childNodes[0].childNodes[0].style.height = document.body.clientWidth;
            contentDiv.appendChild(div);
          }
          // for (let ele of document.getElementsByName("seal_img_div")) {
          //   this.addEventOnSealDiv(
          //     ele,
          //     JSON.parse(ele.dataset.sesSignature),
          //     JSON.parse(ele.dataset.signedInfo)
          //   );
          // }
        },
        fail(error) {
          console.log(error, "getOfd");
        }
      });
    }

nice，实现了，真的改变了宽高，并且改变窗口大小，也能适应（每改一次要刷新一下页面，不知道为啥，很无奈，但总归是实现了）

后记

第一次知道了ofd这种文件格式，百度查了一下，能查到的东西也很少，官方例子没啥说明，也只有一个demo，特此记录一下这个问题。如果有大佬也遇到了这个问题，有更好的解决办法，还请赐教！

ofdjs使用，及响应式处理

ofdjs的使用

响应式处理

解决办法

后记