网络上找了很多方案，都不太行，或多或少有问题，我这里分享一个我自己实现的，基于VUE3 + TS + ElementPlus，几乎是粘贴即用，汉化文件自行下载附件即可

其实就是一个 pdfPreview.vue 组件，方便调用，代码如下：

<template>
    <!-- viewer.properties: 该文件为PDF插件的中文版配置，放置本地或使用服务器网络地址 -->
    <link rel="resource" type="application/l10n" href="./viewer.properties" />
    
    <VuePdfApp
      :page-scale="pageScale"
      :theme="theme"
      :style="`width: ${viewerWidth}; height: ${viewerHeight};`"
      :pdf="src"
      :file-name="fileName"
      v-bind="$attrs"
      @pages-rendered="pagesRendered"></VuePdfApp>
  </template>
  
  <script setup lang="ts">
  import { computed } from 'vue';
  import VuePdfApp from 'vue3-pdf-app';
  import 'vue3-pdf-app/dist/icons/main.css';
  
  interface Props {
    src: string; // pdf地址
    width?: string | number; // 预览容器宽度
    height?: string | number; // 预览容器高度
    pageScale?: number | string; // 页面默认缩放规则，可选 'page-actual'|'page-width'|'page-height'|'page-fit'|'auto'
    theme?: string; // 预览主题 可选 dark | light
    fileName?: string; // 覆盖pdf文件名
  }
  const props = withDefaults(defineProps<Props>(), {
    src: '',
    width: '100%',
    height: '100vh',
    pageScale: 'page-fit', // 默认自适应展示一页
    theme: 'dark',
    fileName: ''
  });
  const viewerWidth = computed(() => {
    if (typeof props.width === 'number') {
      return props.width + 'px';
    } else {
      return props.width;
    }
  });
  const viewerHeight = computed(() => {
    if (typeof props.height === 'number') {
      return props.height + 'px';
    } else {
      return props.height;
    }
  });
  const emit = defineEmits(['loaded']);
  function pagesRendered(pdfApp: any) {
    emit('loaded', pdfApp);
  }
  </script>

我是这么调用，你们可以结合实际场景来调用

<div v-if="pdfVisible" class="overlay">
	<div class="close-pdf" @click="closePreview()">
		<el-icon><Close /></el-icon>
	</div>
	<PdfPreview page-scale="page-fit" width="100%" height="100%" :pdf="pdfShowSrc"></PdfPreview>
</div>

原始的组件没有关闭按钮，所以我这里添加了一个，样式参考

<style scoped>
.overlay {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, 0.7); /* 半透明遮罩 */
	display: flex;
	justify-content: center;
	align-items: center;
}
.close-pdf {
	color: rgb(255, 255, 255);
	position: fixed;
	z-index: 99999;
	top: 6px;
	right: 215px;
	font-size: 18px;
	cursor: pointer;
}
</style>

其它定义的参数，可以自己根据情况修改

const pdfView = (report: Report) => {
	pdfShowSrc.value = 'https://xxxx' + report.pdfUrl;
	pdfVisible.value = true;
};

const closePreview = () => {
	pdfVisible.value = false;
};

具体预览效果如下

相关参考：

vue-pdf-app源码