阿狗工具

注意：两种方式！！！！！！！！！！！！

注意注意asm模块需要初始化，函数onWebassemblyRuntimeInitialized需要先调用执行

1、直接调用openOFDBaseViewer ，用于超过100页的，1页也可以，有加载动画

onWebassemblyRuntimeInitialized(() => {
          
          openOFDBaseViewer(file, '6wsz1zH2NHnRKuvH', this.$refs['ofd-continer'], this.screenWidth)
        })

2、调用parseOfdDocument这个函数 渲染单页，当然多页也可以，几千页都行，因为方式1的内部就是调用这个函数,但是这个生成的样式好像有问题，自己调一下，大小，，，，这个跟上边一样放到onWebassemblyRuntimeInitialized后，或回调里！！！

parseOfdDocument({
        // ofd写入文件地址
        ofd: file,
        secret: '6wsz1zH2NHnRKuvH',
        success: async(res) => {
          // 输出ofd每页的div
          // const screenWidth = 300
          const divs = await renderOfd(screenWidth, res[0])
          const contentDiv = this.$refs['ofd-continer']//容器
          contentDiv.innerHTML = ''
          for (const div of divs) {
            // div.style.margin = 'auto'
            contentDiv.appendChild(div)
          }
        },
        fail(error) {
          console.log(error)
        }
      })

怎么引用不用说了吧,下课！！！！！

import { onWebassemblyRuntimeInitialized, parseOfdDocument, renderOfd, openOFDBaseViewer } from 'ofd.js'
// import * as M from 'ofd.js'
// console.log(M)

哎，本来想抄的，结果自己写了个，，，太懒了，不想写ᕙ༼ຈلﻝ͜ ຈ༽ᕗI'm the power

https://51shouzu.xyz/ 这个是在线看的

还有个vue组件 可以直接用，，，但是，，哎，艹，，看下面，有点乱，呜呜，。。

第三个办法-----------我去，前面说错了，，这个好像没有用ofd.js ，如果害怕ofdjs的secret会过期，，可以用这个cafe-ofd组件

<template>
  <cafe-ofd ref="ofd" :file-path="file" @on-success="load" @on-scroll="scroll">
    <div slot="header">
      <input ref="file" type="file" class="hidden" accept=".ofd" @change="fileChanged">
    </div>
    <div slot="footer">
      <button @click="plus">放大</button>
      <button @click="minus">缩小</button>
      <button :disabled="currentNum <= 1" @click="pre">上一页</button>
      <input v-model.number="currentNum" type="number" :min="1" :max="pageNum" @change="pageChange(currentNum)">
      <button :disabled="currentNum >= pageNum" @click="next">下一页</button>
      <button @click="print">打印</button>
    </div>
  </cafe-ofd>
</template>

<script>
import cafeOfd from 'cafe-ofd'
import 'cafe-ofd/package/index.css'
// console.log(cafeOfd)
// Vue.use(cafeOfd)
export default {
  name: 'ofdApp',
  components: { cafeOfd: cafeOfd.cafeOfd },
  data() {
    // 这里存放数据
    return {
      currentNum: null,
      file: null,
      pageNum: null
    }
  },
  methods: {
    load(val) {
      this.pageNum = val
    },
    fileChanged() {
      this.file = this.$refs.file.files[0]
    },
    plus() {
      this.$refs.ofd.scale(50)
    },
    minus() {
      this.$refs.ofd.scale(-50)
    },
    next() {
      this.$refs.ofd.nextPage()
    },
    pre() {
      this.$refs.ofd.prePage()
    },
    pageChange(val) {
      this.$refs.ofd.goToPage(val)
    },
    print() {
      this.$refs.ofd.printFile()
    },
    scroll(val) {
      this.currentNum = val
    }
  }
}
</script>

<style>

@media print {
  html,
  body,
  #app {
    height: auto;
    overflow: auto;
  }
}
</style>