vue预览文件，文件太大，添加加载过程进度条，优化用户体验

只能从浏览器获取加载数据，(已加载)/(总大小)=加载百分比

<template>
  <div style="height: calc(100vh - 60px); overflow: auto">
    <div class="progress" v-if="loading">
      <el-progress type="circle" :percentage="this.percentage"></el-progress>
    </div>
    <div v-else>
      <div v-if="this.type === 'pdf'">
        <pdf-viewer></pdf-viewer>
      </div>
      <div v-if="this.type === 'md'" class="markdown-body">
        <markdown-viewer></markdown-viewer>
      </div>
    </div>
  </div>
</template>
import MarkdownViewer from "./MarkdownViewer.vue";
import PdfViewer from "./PdfViewer.vue";
// import baseurl from "@/config/baseurl";
export default {
  components: {
    MarkdownViewer,
    PdfViewer,
  },
  data() {
    return {
      path: this.$store.getters.getFiles.path,
      type: this.$store.getters.getFiles.type,
      pdf: "",
      md: "",
      loading: true,
      percentage: 0,
    };
  },
  mounted() {
    this.rendered();
    this.errorHandler();
    this.type = this.$store.getters.getFiles.type;
    // 创建 XMLHttpRequest 对象
    const xhr = new XMLHttpRequest();

    // 设置要获取的文件的 URL
    const fileUrl = "你的文件地址";

    // 监听 progress 事件来获取加载的大小
    xhr.addEventListener("progress", (event) => {
      if (event.lengthComputable) {
        const loaded = event.loaded; // 已加载的大小
        const total = event.total; // 文件总大小
        this.percentage = parseInt((loaded / total) * 100);
        console.log(this.percentage);
        if (this.percentage == 100) {
          this.loading = false;
        }
        console.log(`已加载: ${loaded} bytes, 总大小: ${total} bytes`);
      }
    });

    // 发起请求以获取文件
    xhr.open("GET", fileUrl);
    xhr.send();
  },
  methods: {
    rendered() {},
    errorHandler() {},
  },
};
</script>
<style lang="scss" scoped>
.progress {
  margin-top: 80px;
  display: flex;
  justify-content: center;
  align-items: center;
}
::v-deep .el-progress-circle {
  width: 300px !important;
  height: 300px !important;
}
::v-deep .el-progress__text {
  width: 300px !important;
  font-size: 24px !important;
}
</style>