ofd.js的使用和ofd.js遇到的相关问题

开头：因为使用到了签章发票之类的问题，使用的又是antd of vue 框架，老大又提出使用ofd.js来渲染，看到渲染是svg就觉得可以，但是在使用的过程中，发现类似的答案太少了，只有官网的一个demo来（其实也够了）耐心下来慢慢扣就可以，但是还想快速上手，就留下点笔记，

联系方式：微信zkhh6666（打好备注，别啥都问我啊，我后面再写篇全点的，和移动端的）基本每天看csdn的可以留言或者私聊（后面贴成功时候的图片，传入 parseOfdDocument的file）

1、上传文件式的显示（vue就可以用）

插件的引入：

import { parseOfdDocument, renderOfd } from 'ofd.js'

html：

//按钮
<div >
  <div>打开OFD</div>
   <input type="file" ref="file" class="hidden" accept=".ofd" @change="fileChanged" />
</div>
//存放的容器，content有用的
<div id="content">
     <div class="seal_img_div"></div>
</div>

js内容：

data(){
return{
file:null,
ofdBase64: null,//个人感觉没用，但是官网拿下来的也没试，你可以留下
}
},
methods:{
fileChanged() {
      this.file = this.$refs.file.files[0]
      console.log(this.file)
      let ext = this.file.name.replace(/.+\./, '')
      if (['ofd'].indexOf(ext) === -1) {
        this.$alert('error', '仅支持ofd类型', {
          confirmButtonText: '确定',
          callback: (action) => {
            this.$message({
              type: 'info',
              message: `action: ${action}`,
            })
          },
        })
        return
      }
      if (this.file.size > 100 * 1024 * 1024) {
        this.$alert('error', '文件大小需 < 100M', {
          confirmButtonText: '确定',
          callback: (action) => {
            this.$message({
              type: 'info',
              message: `action: ${action}`,
            })
          },
        })
        return
      }
      let that = this
     //转换器
      let reader = new FileReader()
      reader.readAsDataURL(this.file)
      reader.onload = function (e) {
        that.ofdBase64 = e.target.result.split(',')[1]
      }
      this.handleChange(this.file)
      this.$refs.file.value = null
    },
    handleChange(file) {
      let that = this
      parseOfdDocument({
        ofd: file,
        success(res) {
          //输出ofd每页的div
          let screenWidth = 1000
          const divs = renderOfd(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)
        },
      })
    },
}

2、axios 请求回来的二进制文件（arraybuffer格式）

（1）存在很多问题，我在使用的时候其实是文件流给的不全导致的，既然你可以拿到res，你可以使用a标签把它下载下来，然后传给在线打开的文件看看下载的文件是否完整

先上代码

previewPrint() {
       console.log(JSZipUtils)
        let obj = {
        xxxxxxxx: xxxxxxx
        xxxxxxxx: xxxxxxxx,
      }
      getActionSpecial1('/xxxxxxxx/xxxxxxxx/xxxxxxxx', obj).then((res) => {
     
        this.PreviewVisible = true
        let that = this
        parseOfdDocument({
          ofd: res,
          success(res) {
            //输出ofd每页的div
            console.log(res)
            let screenWidth = 900
            const divs = renderOfd(screenWidth, res[0]);
            let contentDiv = document.getElementById('content')
                console.log(contentDiv)
            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) {
            that.$message.error(error)
            console.log(error)
          }
      });
      
    },

成功后的图片：

3、别人想用你的项目，打开他从别的地方要下载的ofd文件（做预览）

（1）思路：包装成json格式的去请求（解决跨域问题）
（2）然后通过路由传参的方式，拿到url上的参数，然后mounted里面准备一个方法

代码

fn1(){
      console.log(this.$route.query)
      if(this.$route.query.file){
        let urlstring = ''
        let arr = Object.keys(this.$route.query)
        urlstring = urlstring + this.$route.query.file 

        for(let i = 1;i<arr.length;i++){
 
            urlstring = urlstring + '&' + arr[i] + '='+ this.$route.query[arr[i]]
        }
        console.log(urlstring)
        this.yl1visible = true
        let that = this
        getActionSpecial1(urlstring).then(res=>{
          console.log(res)
          parseOfdDocument({
            ofd: res, 
            success(res) {
              this.ylvisible = true
              //输出ofd每页的div
              console.log(res)
              let screenWidth = 900
              const divs = renderOfd(screenWidth, res[0]);
              let contentDiv = document.getElementById('content1')
              console.log(contentDiv)
              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) {
              that.$message.error(error)
              console.log(error)
            }
            })
          })

      }
       
    },