注意：兩種方式］航洹！＜辈ā４硬！３文骸Ｃ巍！Ｆ谩Ｉ毂佟！馍刮！

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

1、直接調(diào)用openOFDBaseViewer 卡啰，用于超過100頁的静稻，1頁也可以，有加載動畫

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

2碎乃、調(diào)用parseOfdDocument這個函數(shù) 渲染單頁，當然多頁也可以惠奸，幾千頁都行梅誓，因為方式1的內(nèi)部就是調(diào)用這個函數(shù),但是這個生成的樣式好像有問題，自己調(diào)一下佛南，大小梗掰，，嗅回，及穗，這個跟上邊一樣放到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)
        }
      })

怎么引用不用說了吧,下課！７偈９喝埂！鹃栽！

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() {
    // 這里存放數(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>