feat: 初始化
This commit is contained in:
112
src/components/filePreview/DocxPreview.vue
Normal file
112
src/components/filePreview/DocxPreview.vue
Normal file
@@ -0,0 +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>
|
||||
|
||||
74
src/components/filePreview/ImagePreview.vue
Normal file
74
src/components/filePreview/ImagePreview.vue
Normal file
@@ -0,0 +1,74 @@
|
||||
<template>
|
||||
<div class="img-preview" >
|
||||
<img id="previewImg" :src="fileUrl" :style="{width: fullscreen?windowWidth+'px':'100%',height: fullscreen?'auto':'650px;'}" alt="Preview"/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
const emit = defineEmits(["update:fileUrl"])
|
||||
const props = defineProps({
|
||||
fileUrl: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
fullscreen: {
|
||||
type: Boolean,
|
||||
default:false
|
||||
}
|
||||
})
|
||||
const showImagePreview = ref(true)
|
||||
const dialogWidth = ref('')
|
||||
const dialogHeight = ref('')
|
||||
// 屏幕宽度
|
||||
const windowWidth = ref(0)
|
||||
// 屏幕高度
|
||||
const windowHeight = ref(0)
|
||||
// onMounted(() => {
|
||||
// })
|
||||
// 获取屏幕尺寸
|
||||
const getWindowResize = function () {
|
||||
windowWidth.value = window.innerWidth-32
|
||||
windowHeight.value = window.innerHeight
|
||||
}
|
||||
getWindowResize()
|
||||
window.addEventListener('resize', getWindowResize)
|
||||
nextTick(() => {
|
||||
const previewImg = document.getElementById('previewImg');
|
||||
// console.log(previewImg)
|
||||
let offsetHeight = previewImg?.offsetHeight
|
||||
// console.log(offsetHeight)
|
||||
if (offsetHeight > 750){
|
||||
// previewImg?.offsetHeight = 750
|
||||
}
|
||||
})
|
||||
|
||||
// dialogWidth.value=document.getElementById('previewImg')?.offsetWidth||1500
|
||||
// dialogWidth.value=document.getElementById('previewImg')?.offsetHeight||750
|
||||
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.img-preview {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
overflow-y: auto;
|
||||
overflow-x: auto;
|
||||
&::-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>
|
||||
49
src/components/filePreview/PdfPreview.vue
Normal file
49
src/components/filePreview/PdfPreview.vue
Normal file
@@ -0,0 +1,49 @@
|
||||
<template>
|
||||
<!-- <iframe height="650px" width="100%" :src="fileUrl" frameborder="0"></iframe>-->
|
||||
<vue-pdf-app style="height: 100vh; width: 100vw" :pdf="fileUrl" :config="pdfPreviewConfig"></vue-pdf-app>
|
||||
</template>
|
||||
|
||||
<script setup lang="jsx">
|
||||
import VuePdfApp from "vue3-pdf-app";
|
||||
import "vue3-pdf-app/dist/icons/main.css";
|
||||
|
||||
const pdfPreviewConfig = ref({
|
||||
sidebar: false,//左侧目录展示
|
||||
secondaryToolbar: false,//二级工具栏
|
||||
toolbar: false,//工具栏显示
|
||||
errorWrapper: false,
|
||||
})
|
||||
const props = defineProps({
|
||||
fileUrl: {
|
||||
type: String,
|
||||
default: ''
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
#vuePdfApp {
|
||||
width: auto !important;
|
||||
height: 650px !important;
|
||||
}
|
||||
|
||||
#viewerContainer {
|
||||
&::-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>
|
||||
28
src/components/filePreview/PptPreview.vue
Normal file
28
src/components/filePreview/PptPreview.vue
Normal file
@@ -0,0 +1,28 @@
|
||||
<template>
|
||||
<div id="pptx" ></div>
|
||||
</template>
|
||||
|
||||
<script setup >
|
||||
const props = defineProps({
|
||||
fileUrl: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
fullscreen: {
|
||||
type: Boolean,
|
||||
default:false
|
||||
}
|
||||
})
|
||||
// js部分 jquery已在index.html中引入 无需另外安装
|
||||
const handlePPtx = () => {
|
||||
$("#pptx").pptxToHtml({
|
||||
pptxFileUrl: props.fileUrl, //pptx文件地址
|
||||
slidesScale: "100%",
|
||||
});
|
||||
}
|
||||
handlePPtx()
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
78
src/components/filePreview/index.vue
Normal file
78
src/components/filePreview/index.vue
Normal file
@@ -0,0 +1,78 @@
|
||||
<template>
|
||||
<div class="file-preview">
|
||||
<el-dialog id="dialog" :border="false" width="1200" :style="{height: fullscreen?'':'650px;'}" top="10vh"
|
||||
:fullscreen="fullscreen"
|
||||
:title="fileName" :show-close="true" :visible.sync="showPreview" v-model="showPreview"
|
||||
:append-to-body="false"
|
||||
:close-on-click-modal="true"
|
||||
>
|
||||
<!-- <ppt-preview :file-url="fileUrl" :fullscreen="fullscreen" v-if="fileType === 'ppt'||fileType === 'pptx'"/>-->
|
||||
<pdf-preview :file-url="fileUrl" :fullscreen="fullscreen" v-if="fileType === 'pdf'"/>
|
||||
<docx-preview :file-url="fileUrl" :fullscreen="fullscreen" v-if="fileType === 'docx'"/>
|
||||
<image-preview :fileUrl="fileUrl" :fullscreen="fullscreen" :fileName="fileName" v-if="checkImgType(fileType)"/>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import {ElNotification} from "element-plus";
|
||||
|
||||
const emit = defineEmits(["update:fileUrl"])
|
||||
const props = defineProps({
|
||||
fileUrl: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
fileType: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
fileName: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
//弹窗是否铺满全屏
|
||||
fullscreen: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
})
|
||||
const showPreview = ref(true)
|
||||
// console.info("🚀 ~method:fileType -----", props.fileType)
|
||||
|
||||
const checkImgType=(fileType)=>{
|
||||
return fileType == 'png' || fileType == 'jpg' || fileType == 'jpeg' || fileType == 'ico' || fileType == 'PNG' || fileType == 'JPG';
|
||||
}
|
||||
// console.info("🚀 ~method:‘checkImgType(props.fileType) -----", checkImgType(props.fileType))
|
||||
if(props.fileType!=='pdf'&&props.fileType!=='docx'&&!checkImgType(props.fileType)){
|
||||
showPreview.value=false
|
||||
ElNotification({
|
||||
title: '提示',
|
||||
message: props.fileName+' 文件不支持预览！',
|
||||
type: 'error'
|
||||
})
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.file-preview {
|
||||
.el-overlay-dialog {
|
||||
left: 0 !important;
|
||||
|
||||
}
|
||||
|
||||
.el-dialog__headerbtn {
|
||||
.el-dialog__close {
|
||||
font-size: 30px;
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
.el-dialog__body {
|
||||
overflow: hidden;
|
||||
|
||||
padding: 0 !important;
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
Reference in New Issue
Block a user