Vue中使用vue-pdf嵌入和展示PDF文件

npm install vue-pdf
# 或者
yarn add vue-pdf

<template>
  <div>
    <pdf
      :src="pdfSrc"
      :page="pageNumber"
      @progress="onProgress"
      @num-pages="onNumPages"
    />
    <button @click="prevPage">上一页</button>
    <button @click="nextPage">下一页</button>
  </div>
</template>

<script>
import pdf from 'vue-pdf';

export default {
  components: {
    pdf,
  },
  data() {
    return {
      pdfSrc: require('@/assets/sample.pdf'), // 本地 PDF 文件路径
      pageNumber: 1,
      totalPages: 0,
    };
  },
  methods: {
    prevPage() {
      if (this.pageNumber > 1) {
        this.pageNumber--;
      }
    },
    nextPage() {
      if (this.pageNumber < this.totalPages) {
        this.pageNumber++;
      }
    },
    onProgress(progressData) {
      console.log(`Loading progress: ${progressData.loaded / progressData.total * 100}%`);
    },
    onNumPages(numPages) {
      this.totalPages = numPages;
    },
  },
};
</script>

<style scoped>
button {
  margin: 5px;
}
</style>

<template>
  <div>
    <pdf :src="pdfSrc" :page="pageNumber" :scale="scale" />
    <input type="range" min="0.5" max="2" step="0.1" v-model="scale" />
  </div>
</template>

<script>
import pdf from 'vue-pdf';

export default {
  components: {
    pdf,
  },
  data() {
    return {
      pdfSrc: require('@/assets/sample.pdf'),
      pageNumber: 1,
      scale: 1.0, // 默认缩放比例为1.0
    };
  },
};
</script>