前端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文件预览
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);
}