1、调整合同

2、调整项目
3、调整客商

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>