<!-- 文件预览组件(通过文件名获取文件url) --> <script lang="ts" setup name="FilePreview"> import VuePdfEmbed from 'vue-pdf-embed' // import * as pdfjsLib from 'pdfjs-dist' import { ElLoading } from 'element-plus' import { getPhotoUrl } from '@/api/file' // 打印文件url const props = defineProps({ printFileName: { type: String, }, }) const pdfUrl = 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) pdfUrl.value = res.data console.log('pdfurl', pdfUrl.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> <div class="pdf-container"> <vue-pdf-embed ref="pdf" :source="{ cMapUrl, cMapPacked: true, url: pdfUrl, }" :scale="1" /> </div> </template> <style lang="scss" scoped> .pdf-container { width: 100%; font-family: Arial, sans-serif; /* 设置字体 */ } </style>