vue pdf.js获取当前页码

在Vue.js应用中使用PDF.js库来显示PDF文件并获取当前页码，首先需要安装`pdfjs-dist`库。你可以通过npm或者yarn来安装：

npm install pdfjs-dist
# 或者
yarn add pdfjs-dist

然后，在你的Vue组件里，可以创建一个PDF查看器，并添加一个方法来获取当前页码。这里是一个简单的例子：

<template>
  <div>
    <canvas ref="pdfCanvas"></canvas>
    <button @click="getPdfPage">获取当前页码</button>
  </div>
</template>

<script>
import { PDFViewer } from 'pdfjs-dist/web/pdf_viewer.js';

export default {
  data() {
    return {
      pdfUrl: 'path/to/your/pdf.pdf', // 替换为你PDF的实际路径
      pageCount: null,
    };
  },
  mounted() {
    this.loadPdf();
  },
  methods: {
    async loadPdf() {
      const loadingManager = new PDFLoadingManager();
      loadingManager.setVerbosity(PDFLoadingManager.LOADING_PROGRESS);

      const pdfJSWorker = await PDFJS.getDocument({
        url: this.pdfUrl,
        loadingManager,
      });

      this.pdfDocument = pdfJSWorker.getDoc();
      this.pageCount = this.pdfDocument.numPages;
      
      // 创建PDF视图
      const container = document.getElementById('pdfCanvas');
      const viewer = new PDFViewer(container, {
        useDownloadButton: false, // 如果不需要下载按钮，可以去掉这行
      });
      
      // 加载第一个页面
      await viewer.loadPage(1);
    },
    
    getPdfPage() {
      if (this.currentLoadedPage) {
        console.log(`当前页码: ${this.currentLoadedPage.number}`);
      } else {
        console.log('加载PDF前，请先点击“加载PDF”');
      }
    },
  },
};
</script>

在这个例子中，我们首先设置了PDF文件的URL，然后在`mounted`生命周期钩子中加载PDF。`loadPdf`方法会初始化PDF文档、计算总页数，并创建一个PDF Viewer实例。`getPdfPage`方法会在每次点击按钮时打印出当前加载的页码。