vue中运用vue-pdf实现pdf分页预览及缩放(可解决pdf预览不清晰问题)

<template>
  <div class="pdf-container">
    <pdf
      :src="pdfSrc"
      :page="currentPage"
      @num-pages="pageCount = $event"
      @loaded="loadPdfHandler"
      @progress="loadedRatio = $event"
      @page-loaded="pageLoadedHandler"
      @link-clicked="linkClickedCallback"
      :scale="scale"
      :min-scale="minScale"
      :max-scale="maxScale"
      :scroll-ref="scrollRef"
      :rotate="rotate"
    ></pdf>
    <div class="pdf-controls">
      <!-- 分页控制和缩放控制 -->
    </div>
  </div>
</template>
 
<script>
import pdf from 'vue-pdf'
 
export default {
  components: {
    pdf
  },
  data() {
    return {
      pdfSrc: 'path/to/your/pdf/file.pdf',
      currentPage: 1,
      pageCount: 0,
      loadedRatio: 0,
      scale: 1,
      minScale: 1,
      maxScale: 3,
      rotate: 0,
      // 其他相关数据状态
    }
  },
  methods: {
    loadPdfHandler() {
      // 当PDF加载完成时的处理逻辑
    },
    pageLoadedHandler(e) {
      // 当PDF的每一页加载完成时的处理逻辑
    },
    linkClickedCallback(e) {
      // 当点击PDF内的链接时的处理逻辑
    },
    // 其他方法...
  }
}
</script>
 
<style>
.pdf-container {
  /* 样式 */
}
.pdf-controls {
  /* 样式 */
}
</style>

这个代码实例展示了如何在Vue应用中使用vue-pdf组件来加载和显示PDF文件。它包括了基本的加载、分页、缩放和处理链接点击的逻辑。在实际应用中，你需要根据具体需求来扩展.pdf-controls中的内容，以及添加其他必要的数据和方法来满足你的应用需求。