/* 组件使用说明 1、首先安装依赖npm i ofd.js --save
2、import {parseOfdDocument, renderOfd} from "ofd.js";
3、准备一个div容器 */
<template>
<div id="divId" style="text-align: center"></div>
</template>
<script>
import { parseOfdDocument, renderOfd } from "ofd.js";
export default {
data() {
return {
};
},
mounted() {
parseOfdDocument({
// ofd写入文件地址
ofd: "/SystemMana/control/streamCdt?contentId=56ls8Fgf1vI3UaDaxVd",
success(res) {
//输出ofd每页的div
let screenWidth = 800;
const divs = renderOfd(screenWidth, res[0]);
let contentDiv = document.getElementById('divId');
contentDiv.innerHTML = '';
for (const div of divs) {
contentDiv.appendChild(div);
}
},
fail(error) {
console.log(error)
}
});
},
methods: {
}
};
</script>
<style lang="less" scoped>
.login-wrap {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background: url("../../assets/image/loginBac.jpg");
.login {
width: 368px;
position: relative;
left: -33%;
.header {
margin-top: 9vh;
margin-bottom: 6vh;
text-align: center;
.description {
font-size: 30px;
font-weight: 600;
margin-top: 1vh;
}
}
}
.login-form {
background-color: #fff;
padding: 0 20px 20px;
box-shadow: 0 0 20px #ddd;
.form {
padding-top: 1vh;
}
.login-btn {
display: inline-block;
width: 100%;
margin-top: 2vh;
}
}
}
</style>
vue前端预览ofd格式的文件(拿过去直接使用)
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。
推荐阅读更多精彩内容
- DWG格式文档,其实有很多人是不知道的,因为你不是那个行业工作的的人,所以都没有花时间去了解它,使用它,那是因为你...
- 实现效果: 点击页面的预览按钮,能够预览word、excel、txt或者ppt均可在页面展示,效果图如下。 实现思...
- ESLint :代码检查+代码格式化工具。 Prettier:代码格式化工具。 一般的代码格式化工作,ESLint...
- 先在vscode安装依赖的Vetur,ESlint,Prettier插件 打开配置信息在vscode设置中点击右上...