admin 管理员组文章数量: 887021
封装word和pdf组件,根据需求自己选择内容
<template>
<el-dialog
v-model="dialogVisible"
title="附件"
width="60%"
>
<vue-office-docx
v-if="flag"
:src="pdfState.pdfSource.url"
@rendered="renderedHandler"
@error="errorHandler"
/>
<vue-pdf-embed :source="pdfState.pdfSource" textLayer/>
<!-- <vue-pdf-embed :source="pdfState.pdfSource" :page="pdfState.pageNum" textLayer/>
<div class="btn-box">
<el-button type="primary" @click="pageUp">上一页</el-button>
<el-button type="primary" @click="pageDown">下一页</el-button>
</div> -->
<!-- <template #footer>
<el-row justify="end">
<el-col :span="4">
<el-button type="primary" @click="dialogVisible=false">确认</el-button>
</el-col>
<el-col :span="4">
<el-button @click="dialogVisible=false">取消</el-button>
</el-col>
</el-row>
</template> -->
</el-dialog>
</template>
<script setup>
import { onMounted, ref } from "vue"
import VueOfficeDocx from '@vue-office/docx'
import '@vue-office/docx/lib/index.css'
import VuePdfEmbed from "vue-pdf-embed/dist/vue3-pdf-embed";
import { createLoadingTask } from 'vue3-pdfjs/esm';
const dialogVisible = ref(false)
const docx = ref("")
const flag = ref(true)
const pdfState = reactive({
pdfSource: {
url:"",
cMapUrl: 'https://cdn.jsdelivr/npm/pdfjs-dist@2.9.359/cmaps/',
cMapPacked: true,
},
// 当前页
pageNum: 1,
// 总页数
numPages: 1,
})
// docx作为参数通过父组件传参
const renderedHandler=()=>{
console.log("渲染完成")
}
const errorHandler=()=>{
console.log("渲染失败")
}
function openDialog(item,value) {
console.log(item,66);
pdfState.pdfSource.url = item
var file_name = item;
console.log(file_name.endsWith(".doc"),"66666");
if (value=="word") {
console.log("这是一个Word文档");
flag.value = true
} else {
flag.value = false
console.log("这是一个PDF文档");
}
nextTick(()=>{
dialogVisible.value = true
if (!flag.value) {
const loadingTask = createLoadingTask(pdfState.pdfSource);
loadingTask.promise.then((pdf) => {
console.log(pdf,666666);
// 获取页面总页数
pdfState.numPages = pdf.numPages;
});
}
})
}
// 上一页
function pageUp() {
if (pdfState.pageNum >= 1) {
pdfState.pageNum--;
}
// 当页面位于首页时,再次点击上一页跳转至尾页
if (pdfState.pageNum == 0) {
pdfState.pageNum = pdfState.numPages;
}
}
// 下一页
function pageDown() {
if (pdfState.pageNum <= pdfState.numPages) {
pdfState.pageNum++;
}
// 当页面位于尾页时,再次点击下一页跳转至首页
if (pdfState.pageNum > pdfState.numPages) {
pdfState.pageNum = 1;
}
}
defineExpose({ openDialog }) // 提供 openModal 方法,用于打开弹窗
</script>
<style scoped>
.docx-wrapper {
padding: 0px !important;
background: #fff !important;
}
.docx-wrapper>section.docx {
box-shadow:none !important;
}
.btn-box {
text-align: right;
}
</style>
样式参考
<style>
#vue-pdf-view {
position: absolute;
left: 50%;
transform: translateX(-50%) scale(1.0);
width: 70%;
height: 100%;
text-align: center;
/* 内容溢出显示滚动条 */
overflow: scroll;
/* 隐藏x、y轴滚动条 */
overflow-y: hidden;
overflow-x: hidden;
}
/* 设置滚动栏的宽、高 */
#vue-pdf-view::-webkit-scrollbar {
width: 8px;
height: 8px;
}
/* 设置滚动条的样式 */
#vue-pdf-view::-webkit-scrollbar-thumb {
border-radius: 15px;
background-color: #eee;
}
/* 鼠标经过滚动条变换颜色 */
#vue-pdf-view::-webkit-scrollbar-thumb:hover {
background-color: #CBCBFF;
}
</style>
参考文献
https://blog.csdn/qq_45897239/article/details/136080318
本文标签: Word VueOfficeDocx
版权声明:本文标题:vue3预览word预览,VueOfficeDocx 内容由网友自发贡献,该文观点仅代表作者本人, 转载请联系作者并注明出处:http://www.freenas.com.cn/jishu/1726312152h934601.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论