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文件预览
    
http://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">下一页
          打印
        
      
    
  






.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文件）

  
    
      
        
        
        
          
        
        
      
    
    
      暂无数据
    
  





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