上传文件的pdf组件预览。

src/components/Upload/FilesUpload.vue

@@ -32,25 +32,13 @@
       </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";
 import { UploadFile, UploadFiles, UploadUserFile } from "element-plus";
 import { uploadFileApi } from "@/api/file";
 import PDFView from "@/components/PDFView/index.vue";
-import VuePdfEmbed from "vue-pdf-embed";
 
 const props = defineProps({
   size: {
@@ -135,15 +123,17 @@ const deleteFile = (index: number) => {
   fileNameList.value.splice(index, 1);
 };
 
-const PDFVisible = ref(false);
-const pdfSource = ref("");
 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];
+    toShowPDF(url);
   }
 };
+
+const PDFDrawerViewRef = ref(null);
+const toShowPDF = (url) => {
+  PDFDrawerViewRef.value && PDFDrawerViewRef.value.showPdf(url);
+};
 </script>
 
 <style scoped lang="scss">