vue-pdf-reader使用

### vue-pdf-reader 库的使用教程 `vue-pdf-reader` 是一个用于 Vue.js 的 PDF 预览插件，支持 Vue 2 和 Vue 3。以下是关于该库的安装、配置以及使用的详细介绍。 #### 安装 `vue-pdf-reader` 要使用此库，需通过 npm 或 yarn 进行安装： ```bash npm install vue-pdf-reader ``` 或者 ```bash yarn add vue-pdf-reader ``` --- #### 基本使用方法 在项目中引入并注册组件后即可使用。以下是一个完整的示例代码片段： ```javascript // main.js 中全局注册组件 (Vue 3 示例) import { createApp } from 'vue'; import App from './App.vue'; // 导入 vue-pdf-reader 组件 import PdfReader from 'vue-pdf-reader'; import 'vue-pdf-reader/dist/style.css'; // 引入样式文件 const app = createApp(App); app.use(PdfReader); // 注册插件 app.mount('#app'); ``` 如果仅想局部使用，则可以在单个组件中按如下方式导入和声明： ```javascript <template> <div> <!-- 属性说明见下 --> <PdfReader :src="pdfUrl" /> </div> </template> <script> import { defineComponent } from 'vue'; import PdfReader from 'vue-pdf-reader'; import 'vue-pdf-reader/dist/style.css'; export default defineComponent({ components: { PdfReader, }, data() { return { pdfUrl: '/path/to/your/file.pdf', // 替换为实际路径或 URL }; }, }); </script> ``` --- #### 可选属性 以下是 `vue-pdf-reader` 提供的一些常用属性及其功能描述： | 属性名 | 类型 | 默认值 | 描述 | |--------|--------|--------------|----------------------------------------------------------------------| | src | String | null | 要加载的 PDF 文件地址 | | scale | Number | 1 | 设置缩放比例 | | page | Number | 1 | 初始显示页数 | | rotate | Number | 0 | 页面旋转角度 (-90, 0, 90, 180) | 示例代码展示如何自定义这些参数： ```html <PdfReader :src="'https://example.com/sample.pdf'" :scale="1.5" :page="3" :rotate="90" /> ``` 上述代码会加载指定的 PDF 文件，并设置初始页面为第 3 页，放大倍率为 1.5，且顺时针旋转 90°[^1]。 --- #### 动态更新 PDF 文件 可以通过绑定动态数据来实现切换不同的 PDF 文件预览效果。例如： ```javascript <template> <div> <button @click="changePdf">切换到另一个 PDF</button> <PdfReader :src="currentPdf" /> </div> </template> <script> export default { data() { return { currentPdf: '/path/to/default.pdf', }; }, methods: { changePdf() { this.currentPdf = '/path/to/newfile.pdf'; }, }, }; </script> ``` 点击按钮后，PDF 将自动刷新为新的文件内容[^2]。 --- #### 错误处理机制 当无法成功加载 PDF 文件时，可以监听错误事件以便捕获异常情况： ```html <PdfReader :src="pdfUrl" @error="(err) => handleError(err)" /> ``` 对应的 JavaScript 方法可记录日志或提示用户： ```javascript methods: { handleError(error) { console.error('Failed to load the PDF:', error); alert('无法加载 PDF 文件，请稍后再试！'); } } ``` --- ### 总结 以上展示了 `vue-pdf-reader` 的基本用法，包括安装过程、基础配置、常见属性应用以及动态交互逻辑等内容。对于更复杂的场景需求，建议查阅官方文档获取进一步的支持信息。