上传文件的pdf组件预览。

src/components/Upload/FilesUpload.vue

@@ -32,18 +32,7 @@
       </el-tag>
     </div>
   </el-upload>
-  <el-drawer
-    v-model="PDFVisible"
-    :footer="false"
-    :header="false"
-    :show-close="false"
-    destroy-on-close
-    direction="rtl"
-    :append-to-body="true"
-    size="972px"
-  >
-    <VuePdfEmbed :source="pdfSource" annotation-layer text-layer />
-  </el-drawer>
+  <PDFDrawerView ref="PDFDrawerViewRef"></PDFDrawerView>
 </template>
 <script lang="ts" setup>
 import { ref } from "vue";
@@ -142,15 +131,14 @@ const deleteFile = (index: number) => {
   fileNameList.value.splice(index, 1);
 };
 
-const PDFVisible = ref(false);
-const pdfSource = ref("");
+const PDFDrawerViewRef = ref(null);
 const handlePreview = (index: number) => {
   if (srcList.value.length > index && props.generatePdf) {
-    pdfSource.value =
-      import.meta.env.VITE_APP_UPLOAD_URL + pdfList.value[index];
-    PDFVisible.value = true;
+    let url = import.meta.env.VITE_APP_UPLOAD_URL + pdfList.value[index];
+    PDFDrawerViewRef.value && PDFDrawerViewRef.value.showPdf(url);
   }
 };
+
 defineExpose({ setFileList });
 </script>