注意：两种方式！！！！！！！！！！！！
注意注意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>
