在Vue.js应用中，使用`vue-pdf`库可以方便地集成PDF文件的展示。这篇文章将详细解析如何在Vue项目中实现这一功能。
确保已安装`vue-pdf`库。可以通过npm来安装：
```bash
npm install vue-pdf --save
```
`vue-pdf`是一个基于PDF.js的Vue组件，它允许我们在Vue应用中渲染PDF文档。在`main.js`或你的应用入口文件中，导入并全局注册`vue-pdf`：
```javascript
import Vue from 'vue'
import Pdf from 'vue-pdf'
Vue.component('pdf', Pdf)
```
在你的Vue组件中，你可以使用`<pdf>`组件来显示PDF文件。我们需要准备PDF文件的URL。这里有两个按钮，分别用于加载两个不同的PDF文件：
```html
<template>
<div class="pdf_wrap">
<div class="pdf_list">
<pdf
v-for="(i, index) in numPages"
:key="index"
:src="src"
:page="i"
style="width: 100%"
></pdf>
</div>
<Button type="info" @click="loadPdf(pdfUrl1)">文件1</Button>
<Button type="info" native-type="submit" @click="loadPdf(pdfUrl2)">文件2</Button>
</div>
</template>
```
`<pdf>`组件的属性包括：
- `src`: PDF文件的URL。
- `page`: 显示的页面编号（从1开始）。
在数据对象中，定义PDF文件的URL以及用于存储PDF总页数的变量：
```javascript
data() {
return {
src: '',
numPages: undefined,
pdfUrl1: 'https://clinic-trial-attachments.oss-cn-beijing.aliyuncs.com/output/demo.pdf/1.pdf',
pdfUrl2: 'https://clinic-trial-attachments.oss-cn-beijing.aliyuncs.com/output/123demo',
}
},
```
在`mounted()`生命周期钩子中，初始化PDF文件的加载：
```javascript
mounted() {
this.loadPdf(this.pdfUrl1)
},
```
`loadPdf()`方法用于处理PDF文件的加载，并获取PDF的总页数：
```javascript
methods: {
loadPdf(url) {
this.src = pdf.createLoadingTask(url)
this.src.promise.then(pdf => {
this.numPages = pdf.numPages // 获取当前PDF总页数
})
},
}
```
`pdf.createLoadingTask(url)`返回一个Promise，当PDF文件加载完成时，我们可以访问到PDF对象，从而获取其总页数`numPages`。
为了实现通过按钮切换PDF文件，我们在按钮的点击事件中调用`loadPdf()`方法，并传入相应的PDF URL。注意，由于`vue-pdf`组件默认只显示PDF的第一页，这里使用`v-for`循环遍历`numPages`，创建并显示所有页面。这样，用户可以通过滚动查看PDF的所有页面。
考虑到PDF文件可能存在的跨域问题，需要后端提供CORS支持。如果PDF文件位于其他域名下，服务器必须设置合适的响应头以允许跨域请求。
总结来说，Vue应用中使用`vue-pdf`组件显示PDF文件的关键步骤包括：
1. 安装并引入`vue-pdf`库。
2. 在组件模板中使用`<pdf>`组件，并通过`v-for`循环显示所有页面。
3. 在数据对象中存储PDF文件的URL和总页数。
4. 在`mounted()`或`created()`钩子中加载PDF文件。
5. 实现切换PDF文件的功能，通过按钮点击事件更新`src`属性。
希望这篇文章能帮助你理解如何在Vue中使用`vue-pdf`组件来展示PDF文件。如果你需要了解更多关于Vue.js和PDF展示的信息，可以查阅更多相关的文章和文档。
