vue-pdf vue预览pdf文档

### 使用 `vue-pdf-app` 实现 PDF 文件预览 为了使用 `vue-pdf-app` 插件来实现在前端页面上显示 PDF 文档的功能，可以按照以下方法操作： #### 安装依赖包 首先，在项目根目录下通过命令行工具安装必要的 npm 包： ```bash npm install vue3-pdf-app ``` #### 引入并注册组件 接着，在项目的入口文件或者具体使用的页面中引入该插件及其样式表，并将其作为全局或局部组件进行注册。 对于 **Vue 3** 的单文件组件来说，可以在 `<script>` 标签内部完成这些工作[^3]： ```javascript import { defineComponent } from 'vue'; import VuePdfApp from "vue3-pdf-app"; import "vue3-pdf-app/dist/icons/main.css"; export default defineComponent({ components: { VuePdfApp, }, }); ``` #### 编写模板结构 随后，在对应的 `.vue` 文件中的 `<template>` 部分定义好 HTML 结构，以便能够正确渲染出带有 PDF 查看器的界面。这里给出一个简单的例子说明如何设置基本属性以及传递给子组件的数据源链接地址: ```html <template> <div class="pdf-container"> <!-- 这里传入 pdf 文件路径 --> <vue-pdf-app :page="currentPage" :src="pdfSrc"></vue-pdf-app> <!-- 添加翻页按钮等交互元素 --> <button @click="prevPage">Previous</button> <span>{{ currentPage }}</span> / {{ totalPages }} <button @click="nextPage">Next</button> </div> </template> ``` #### 处理逻辑控制 最后一步是在 `<script setup>` 或者选项 API 中编写相应的 JavaScript 方法用于处理用户的输入事件（比如点击上下一页），同时也可能涉及到获取总页数等相关信息: ```javascript <script setup> // 假设已经完成了上述提到过的导入语句... const pdfSrc = '/path/to/your/document.pdf'; // 设置要加载的 PDF 文件 URL 地址 let currentPage = ref(1); // 当前正在查看的是第几页，默认为首页 let totalPages = computed(() => // 计算得到文档总共包含多少页 Math.ceil(VuePdfApp.getPageNum() || 0) ); function nextPage(){ if (currentPage.value >= totalPages){ return; } currentPage.value += 1; } function prevPage(){ if(currentPage.value <= 1){ return; } currentPage.value -= 1; } </script> ``` 以上就是利用 `vue-pdf-app` 库创建一个简易版 PDF 浏览器的主要步骤概述。当然实际开发过程中还可以根据需求进一步扩展功能特性，如添加缩放比例调整、书签导航栏等功能模块。