1
<script setup>
2
import { ref } from "vue";
3
import VueOfficePdf from "@vue-office/pdf";
4

5
const fileBuffer = ref(null);
6
const fileName = ref("");
7
const status = ref("先选择一个 PDF 文件");
8

9
async function handleFileChange(event) {
10
  const [file] = event.target.files ?? [];
11

12
  if (!file) {
13
    return;
14
  }
15

16
  fileName.value = file.name;
17
  status.value = "正在读取文件...";
18

19
  try {
20
    fileBuffer.value = await file.arrayBuffer();
21
    status.value = "文件读取完成，正在渲染 PDF";
22
  } catch (error) {
23
    fileBuffer.value = null;
24
    status.value = `读取失败：${error instanceof Error ? error.message : "未知错误"}`;
25
  }
26
}
27

28
function handleRendered() {
29
  status.value = "PDF 渲染完成";
30
}
31

32
function handleError() {
33
  status.value = "PDF 渲染失败";
34
}
35
</script>
36

37
<template>
38
  <div>
39
    <input
40
      type="file"
41
      accept="application/pdf,.pdf"
42
      @change="handleFileChange"
43
    />
44

45
    <p>当前文件：{{ fileName || "未选择" }}</p>
46
    <p>当前状态：{{ status }}</p>
47

48
    <VueOfficePdf
49
      v-if="fileBuffer"
50
      :src="fileBuffer"
51
      @rendered="handleRendered"
52
      @error="handleError"
53
    />
54
  </div>
55
</template>