vue-pdf封装pdf预览功能

Koini

已于 2023-06-16 09:41:37 修改

阅读量147

点赞数

文章标签： vue javascript

于 2021-07-21 09:12:41 首次发布

本文链接：https://blog.csdn.net/qq_39049726/article/details/118958562

版权

该博客展示了如何在Vue.js应用中利用vue-pdf组件实现PDF文件的加载和显示。通过监听加载事件并使用防抖函数优化，确保在页面加载过程中有效地处理大量页面。同时，获取并显示PDF的总页数，为用户提供流畅的滚动体验。

摘要由CSDN通过智能技术生成

<template>
  <div style="overflow: auto; height: 100vh" v-loading="loading" element-loading-text="文件加载中">
    <pdf
      ref="pdf"
      v-for="i in numPages"
      :key="i"
      :src="src"
      :page="i"
      @loaded="load"
    ></pdf>
  </div>
</template>
<script>
import { debounce } from "@/utils";
import pdf from "vue-pdf";
export default {
  components: {
    pdf,
  },
  props: {
    src: {
      type: String,
      default: "",
    },
  },
  data() {
    return {
      loading: true,
      numPages: null, // pdf 总页数
    };
  },
  mounted() {
    this.getNumPages();
  },
  methods: {
    load: debounce(function () {
      this.loading = false;
    }),
    getNumPages() {
      let loadingTask = pdf.createLoadingTask(this.src);
      loadingTask.promise
        .then((pdf) => {
          this.numPages = pdf.numPages;
        })
        .catch((err) => {
          console.error("pdf 加载失败", err);
        });
    },
  },
};
</script>