From 5dc3c2d2c5e1ba2d67e37035a87bdc520bf83188 Mon Sep 17 00:00:00 2001
From: b2894lxlx <517289602@qq.com>
Date: Wed, 26 Aug 2026 15:57:46 +0800
Subject: [PATCH] =?UTF-8?q?1=E3=80=81=E8=B0=83=E6=95=B4=E5=90=88=E5=90=8C?=
 =?UTF-8?q?=202=E3=80=81=E8=B0=83=E6=95=B4=E9=A1=B9=E7=9B=AE=203=E3=80=81?=
 =?UTF-8?q?=E8=B0=83=E6=95=B4=E5=AE=A2=E5=95=86?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/pdf-preview/main.vue | 79 +++++++++++++++++++++++++++++
 1 file changed, 79 insertions(+)
 create mode 100644 src/components/pdf-preview/main.vue

diff --git a/src/components/pdf-preview/main.vue b/src/components/pdf-preview/main.vue
new file mode 100644
index 0000000..934eefe
--- /dev/null
+++ b/src/components/pdf-preview/main.vue
@@ -0,0 +1,79 @@
+<template>
+  <div v-loading="loading" class="pdf-preview">
+    <el-empty v-if="error" description="PDF预览失败" :image-size="72" />
+    <vue-pdf-embed
+      v-else-if="source"
+      :key="source"
+      :source="source"
+      annotation-layer
+      text-layer
+      @loaded="handleLoaded"
+      @loading-failed="handleError"
+      @rendering-failed="handleError"
+    />
+  </div>
+</template>
+
+<script>
+import VuePdfEmbed from 'vue-pdf-embed';
+import 'vue-pdf-embed/dist/styles/annotationLayer.css';
+import 'vue-pdf-embed/dist/styles/textLayer.css';
+
+export default {
+  name: 'PdfPreview',
+  components: { VuePdfEmbed },
+  props: {
+    source: {
+      type: [String, Object],
+      default: '',
+    },
+  },
+  emits: ['error', 'loaded'],
+  data() {
+    return {
+      loading: true,
+      error: false,
+    };
+  },
+  watch: {
+    source: {
+      handler() {
+        this.loading = true;
+        this.error = false;
+      },
+      immediate: true,
+    },
+  },
+  methods: {
+    handleLoaded(pdf) {
+      this.loading = false;
+      this.$emit('loaded', pdf);
+    },
+    handleError(error) {
+      this.loading = false;
+      this.error = true;
+      this.$emit('error', error);
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.pdf-preview {
+  width: 100%;
+  height: 72vh;
+  overflow: auto;
+  background-color: #f5f7fa;
+
+  :deep(.vue-pdf-embed) {
+    width: min(100%, 1200px);
+    margin: 0 auto;
+  }
+
+  :deep(.vue-pdf-embed__page) {
+    margin-bottom: 12px;
+    background-color: #fff;
+    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12);
+  }
+}
+</style>