// 弹窗
<div v-if="isOk" class="mask wordLoading">加载中。。。</div>
<div v-show="wordVsible" class="mask">
<div class="mask-close" @click="closeWord"><close-outlined /></div>
<div ref="word" class="myWord"></div>
</div>
// 设置变量
const wordVsible: Ref<boolean> = ref(false); // 是否显示文档
const isOk: Ref<boolean> = ref(false); // 文件是否加载完成
const word = ref();
// 获取文档数据
const getWordPath = () => {
wordVsible.value = false;
isOk.value = true;
accessoryFlow({
id: wordPathList.value,
}).then((res: AnyObject) => {
renderAsync(res, word.value, null, {
className: 'docx', // 默认和文档样式类的类名/前缀
inWrapper: true, // 启用围绕文档内容渲染包装器
ignoreWidth: false, // 禁止页面渲染宽度
ignoreHeight: false, // 禁止页面渲染高度
ignoreFonts: false, // 禁止字体渲染
breakPages: true, // 在分页符上启用分页
ignoreLastRenderedPageBreak: true, //禁用lastRenderedPageBreak元素的分页
experimental: false, //启用实验性功能(制表符停止计算)
trimXmlDeclaration: true, //如果为真,xml声明将在解析之前从xml文档中删除
debug: false, // 启用额外的日志记录
}).then((res) => {
if (res) {
setTimeout(() => {
isOk.value = false;
}, 1000);
}
});
setTimeout(() => {
wordVsible.value = true;
}, 1000);
});
};
// 关闭弹窗
const closeWord = () => {
wordVsible.value = false;
isOk.value = false;
};
// 弹窗样式
.wordLoading {
background: gray;
}
// 文档预览
.myWord {
height: 100%;
.docx-wrapper {
height: 100%;
overflow-y: scroll;
.docx {
overflow-y: scroll;
}
}
}
.mask {
width: 100%;
height: 100%;
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
z-index: 99;
}
.mask-close {
position: absolute;
right: 10px;
top: 10px;
font-size: 40px;
z-index: 999;
color: rgb(255, 64, 64);
cursor: pointer;
}