fix : 修复实施图片
This commit is contained in:
@@ -1,112 +1,112 @@
|
||||
<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>
|
||||
|
||||
<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>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user