注意：兩種方式?。。。。。。。。。。。?/h3>

注意注意asm模塊需要初始化，函數(shù)onWebassemblyRuntimeInitialized需要先調(diào)用執(zhí)行

1、直接調(diào)用openOFDBaseViewer ，用于超過100頁的，1頁也可以，有加載動(dòng)畫

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

2、調(diào)用parseOfdDocument這個(gè)函數(shù) 渲染單頁，當(dāng)然多頁也可以，幾千頁都行，因?yàn)榉绞?的內(nèi)部就是調(diào)用這個(gè)函數(shù),但是這個(gè)生成的樣式好像有問題，自己調(diào)一下，大小，，，，這個(gè)跟上邊一樣放到onWebassemblyRuntimeInitialized后，或回調(diào)里?。?！

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)
        }
      })

怎么引用不用說了吧,下課?。。。。?/h2>

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

哎，本來想抄的，結(jié)果自己寫了個(gè)，，，太懶了，不想寫?????? ???I'm the power

https://51shouzu.xyz/ 這個(gè)是在線看的

還有個(gè)vue組件 可以直接用，，，但是，，哎，艸，，看下面，有點(diǎn)亂，嗚嗚，。。

第三個(gè)辦法-----------我去，前面說錯(cuò)了，，這個(gè)好像沒有用ofd.js ，如果害怕ofdjs的secret會(huì)過期，，可以用這個(gè)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() {
    // 這里存放數(shù)據(jù)
    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>