vue3预览word预览，VueOfficeDocx

封装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.net/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.net/qq_45897239/article/details/136080318