前端OFD文件预览（vue案例cafe-ofd）

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)
    
    
      选取文件
    
    
      
        
          
        
        
          放大
          缩小
          <el-button @click="pre" :disabled="currentNum 上一页
          
          = pageNum">下一页
          打印
        
      
    
  




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

前端OFD文件预览（vue案例cafe-ofd）