vue3 实现线上pdf预览

要在Vue3中实现在线PDF预览，你可以使用以下方法：

方法一：使用vue-pdf组件

1. 首先，在命令行中输入以下代码来安装vue-pdf组件：
npm install --save vue-pdf

2. 在需要进行PDF预览的组件中，引入vue-pdf组件：
import pdf from 'vue-pdf'

3. 在组件的template中使用vue-pdf组件，并通过 :src 属性传入PDF文件的地址：
<pdf :src="pdfUrl"></pdf>

其中，pdfUrl是获取到的PDF地址。

方法二：使用iframe标签进行预览

1. 在组件的template中添加一个iframe标签，并通过 :src 属性传入PDF文件的预览地址：
<iframe :src="pdfPreviewUrl"></iframe>

其中，pdfPreviewUrl是获取到的PDF预览地址。

通过以上两种方法，你可以在Vue3中实现线上PDF预览。<span class="em">1</span><span class="em">2</span><span class="em">3</span>
#### 引用[.reference_title]
- *1* [VUE-PDF 实现pdf在线预览](https://blog.csdn.net/codingLeader/article/details/122712566)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"]
- *2* *3* [vue中前端实现pdf预览（含vue-pdf插件用法）](https://blog.csdn.net/m0_71537867/article/details/129918181)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"]
[ .reference_list ]