vue实现pdf查看器

Vue.js 可以通过一些插件或者库来集成 PDF 阅读功能，其中比较流行的是`vue-pdf`库。以下是使用 Vue 和 `vue-pdf`实现 PDF 查看器的基本步骤：

1. **安装依赖**：
首先，在你的项目中安装 `vue-pdf` 和可能需要的 CSS 样式文件。通常使用npm或yarn：

   npm install vue-pdf @vue-pdf/pdfjs-dist
   # 或者
   yarn add vue-pdf @vue-pdf/pdfjs-dist

2. **在组件中引入并注册PDF Viewer**：
在`.vue`文件中，导入`vue-pdf`组件，并在其模板部分添加`<vue-pdf>`标签：

   <template>
     <div>
       <vue-pdf ref="pdfViewer" :src="pdfUrl"></vue-pdf>
     </div>
   </template>

确保你有一个`pdfUrl`变量指向你要展示的PDF文件地址。

3. **处理PDF数据**：
初始化数据属性，比如`pdfUrl`，并设置默认值：

   export default {
     data() {
       return {
         pdfUrl: 'path/to/your/pdf/document.pdf', // 替换为实际PDF文件路径
       };
     },
   }

4. **配置选项**（如果需要）：
如果你需要自定义PDF加载、预览等行为，可以传递选项给`vue-pdf`：

   <vue-pdf :src="pdfUrl" :options="{ autoLoad: false }" @load-end="onPdfLoaded"></vue-pdf>

在`methods`中定义`onPdfLoaded`函数来初始化PDF。

5. **事件监听和操作**：
你可以监听`@load-end`或者其他Vue-pdf提供的事件来进行进一步的操作，例如滚动、缩放等。

methods: {
  onPdfLoaded(pdf) {
    pdf.getPage(1).then(page => {
      // 执行页面操作...
    });
  },
}