<!-- 文件预览组件(通过文件名获取文件url) --> <script lang="ts" setup name="WordOreview"> // import VueOfficeDocx from '@vue-office/docx' // 引入VueOfficeDocx组件 import VueOfficeDocx from '@vue-office/docx' // 引入相关样式 import '@vue-office/docx/lib/index.css' import { ElLoading } from 'element-plus' import { getPhotoUrl } from '@/api/file' // 打印文件url const props = defineProps({ printFileName: { type: String, }, }) const wordUrl = ref('') /** * 初始化 */ function init() { const loading = ElLoading.service({ lock: true, text: '加载中...', background: 'rgba(255, 255, 255, 0.6)', }) getPhotoUrl(props.printFileName!).then((res: any) => { console.log('文件名称', props.printFileName) wordUrl.value = res.data console.log('wordUrl', wordUrl.value) // pdfjsLib.GlobalWorkerOptions.workerSrc = '/pdf.worker.js' // proxy.$refs.pdf.print() // download(url, row.printFileName as string) loading.close() }) } watch(() => props.printFileName, (newVal) => { console.log('newVal', newVal) if (newVal) { init() } }, { immediate: true }) onMounted(() => { // init() }) </script> <template> <vue-office-docx ref="pdf" :src="wordUrl" /> </template> <style lang="scss"> // 样式 .docx-wrapper { background: transparent !important; } </style>