0、提示

下面只有vue的使用示例demo ，官文档参考 cafe-ofd - npm

其他平台可以参考 ofd - npm

官方线上demo: ofd

1、安装包

npm install cafe-ofd --save

2、引入

import cafeOfd from 'cafe-ofd'import 'cafe-ofd/package/index.css'Vue.use(cafeOfd)

3、使用案例（借助了element的组件可以替换其他）

      
ofd文件预览
    
https://www.npmjs.com/package/cafe-ofd
    
npm install cafe-ofd --save
    
      import cafeOfd from 'cafe-ofd' 
      import 'cafe-ofd/package/index.css'
      Vue.use(cafeOfd)    
          选取文件                                                          放大          缩小          上一页                    下一页          打印                    export default {  data(){    return {      fileList: [],      currentNum: null,      file: null,      pageNum: null    }  },  mounted() {  },  methods: {    handlePreview(e){      this.file = e.raw    },    load(val) {      this.pageNum = val;    },    fileChanged() {      this.file = this.$refs.file.files[0];    },    plus() {      this.$refs.ofd.scale(1.1);    },    minus() {      this.$refs.ofd.scale(-0.9);    },    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;    }  }}.footer {  padding: 0 20px;  display: flex;  justify-content: space-between;  gap: 20px;}@media print {  html,  body,  #app {    height: auto;    overflow: auto;  }}

4、案例-图示

5、封装的组件（我在项目中使用的、有使用el组件，只需传入File格式的OFD文件）

                                                                                  暂无数据      export default {  name: "previewOFD",  props: {    file: {      type: File,    }  },  data() {    return {      pageNum: 1,      currentNum: null,      fullScreen: false,    }  },  methods: {    // 加载成功    load(val) {      this.pageNum = val;      this.$emit('success')    },    fileChanged(file) {      this.file = file    },    plus() {      this.$refs.ofd.scale(1.1);    },    minus() {      this.$refs.ofd.scale(-0.9);    },    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;    },    full(){      this.fullScreen = !this.fullScreen    }  }}.previewOFD {  transition: all .5s;}.previewOFDBox {  position: relative;  width: 100%;  height: 100%;}.ofd_full_screen {  z-index: 9999;  position: fixed;  left: 0;  top: 0;  width: 100vw;  height: 100vh;  padding: 10px;  box-shadow: 0 0 4px #000;  background: rgba(0, 0, 0, 0.8);}