113 lines
2.6 KiB
Vue
113 lines
2.6 KiB
Vue
<template>
|
||
<div class="docx-preview">
|
||
<div
|
||
ref="docxDiv"
|
||
class="docxDiv"
|
||
v-loading="loading"
|
||
></div>
|
||
</div>
|
||
</template>
|
||
|
||
<script setup lang="jsx">
|
||
import {renderAsync} from "docx-preview";
|
||
import axios from "axios";
|
||
|
||
let docx = import.meta.glob("docx-preview"); // vite不支持require
|
||
|
||
const props = defineProps({
|
||
fileUrl: {
|
||
type: String,
|
||
default: ''
|
||
}
|
||
})
|
||
|
||
const loading = ref(false);
|
||
|
||
const previewFile = () => {
|
||
loading.value = true;
|
||
axios.request({
|
||
url: props.fileUrl,
|
||
method: 'get',
|
||
responseType: 'blob'
|
||
}).then((response) => {
|
||
let docData = response.data;
|
||
let docxDiv = document.getElementsByClassName("docxDiv");
|
||
renderAsync(docData, docxDiv[0], null, {
|
||
inWrapper: true, // 启用围绕文档内容渲染包装器
|
||
ignoreWidth: false, // 禁止页面渲染宽度
|
||
ignoreHeight: false, // 禁止页面渲染高度
|
||
ignoreFonts: false, // 禁止字体渲染
|
||
breakPages: true, // 在分页符上启用分页
|
||
ignoreLastRenderedPageBreak: true, //禁用lastRenderedPageBreak元素的分页
|
||
experimental: false, //启用实验性功能（制表符停止计算）
|
||
trimXmlDeclaration: true, //如果为真，xml声明将在解析之前从xml文档中删除
|
||
debug: false,
|
||
}).then((res) => {
|
||
loading.value = false;
|
||
});
|
||
}).catch((error) => {
|
||
});
|
||
};
|
||
|
||
previewFile()
|
||
|
||
</script>
|
||
<style lang="scss">
|
||
.docx-preview {
|
||
overflow: auto;
|
||
height: 650px !important;
|
||
&::-webkit-scrollbar {
|
||
width: 6px;
|
||
height: 6px;
|
||
}
|
||
|
||
// 滚动条轨道
|
||
&::-webkit-scrollbar-track {
|
||
background: rgb(239, 239, 239);
|
||
border-radius: 2px;
|
||
}
|
||
|
||
// 小滑块
|
||
&::-webkit-scrollbar-thumb {
|
||
background: rgba(80, 81, 82, 0.29);
|
||
border-radius: 10px;
|
||
}
|
||
.docx-wrapper > section.docx {
|
||
margin-bottom: 0 !important;
|
||
}
|
||
|
||
.docx-wrapper {
|
||
padding: 10px !important;
|
||
|
||
.docx {
|
||
width: 100% !important;
|
||
min-height: 100vh !important;
|
||
overflow: auto !important;
|
||
//padding: 70pt 20pt 0 20pt !important;
|
||
|
||
table {
|
||
width: 100% !important;
|
||
}
|
||
|
||
&::-webkit-scrollbar {
|
||
width: 6px;
|
||
height: 6px;
|
||
}
|
||
|
||
// 滚动条轨道
|
||
&::-webkit-scrollbar-track {
|
||
background: rgb(239, 239, 239);
|
||
border-radius: 2px;
|
||
}
|
||
|
||
// 小滑块
|
||
&::-webkit-scrollbar-thumb {
|
||
background: rgba(80, 81, 82, 0.29);
|
||
border-radius: 10px;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</style>
|
||
|