vue+pdf.js预览本地pdf文件（可以复制文本，滚动页码展示）

要在Vue中使用PDF.js预览本地PDF文件并能够滚动查看页码，你可以遵循以下步骤：

1. 安装 pdf.js 库。
2. 在Vue组件中引入并使用PDF.js。
3. 创建一个canvas元素来渲染PDF页面。
4. 实现滚动功能。

以下是一个简单的Vue组件示例，展示如何实现这个功能：

<template>
  <div>
    <canvas ref="pdfCanvas"></canvas>
  </div>
</template>
 
<script>
import * as pdfjsLib from 'pdfjs-dist/webpack';
 
export default {
  props: {
    pdfFile: {
      type: String,
      required: true
    }
  },
  mounted() {
    this.showPDF(this.pdfFile);
  },
  methods: {
    showPDF(pdfFile) {
      // 使用PDF.js加载PDF文件
      pdfjsLib.getDocument(pdfFile).promise.then(pdfDoc => {
        // 获取第一页
        pdfDoc.getPage(1).then(page => {
          const viewport = page.getViewport({ scale: 1.5 });
          const canvas = this.$refs.pdfCanvas;
          const context = canvas.getContext('2d');
 
          canvas.height = viewport.height;
          canvas.width = viewport.width;
 
          // 渲染页码
          const renderContext = {
            canvasContext: context,
            viewport: viewport
          };
          page.render(renderContext).promise.then(() => {
            // 渲染完成
          });
        });
      });
    }
  }
};
</script>

在这个例子中，我们假设你已经通过npm安装了pdfjs-dist包。pdfFile属性应该是PDF文件的本地路径或者URL。mounted钩子函数中调用了showPDF方法来加载和显示PDF。

请注意，由于浏览器的安全限制，本地文件通常只能在本地开发环境中使用，在生产环境中，你需要通过服务器提供这些文件。另外，如果需要处理更复杂的PDF渲染需求，例如文本选择、查找等，你可能需要编写额外的逻辑来实现这些功能。