Vue + ElementUI 项目中使用vue-pdf 实现简单预览

最新推荐文章于 2025-05-15 09:32:34 发布

Harvey07

最新推荐文章于 2025-05-15 09:32:34 发布

阅读量6.2k

点赞数

CC 4.0 BY-SA版权

分类专栏： Java 文章标签： Java

本文链接：https://blog.youkuaiyun.com/Harvey07/article/details/90053232

本文介绍如何在Vue+ElementUI项目中利用vue-pdf组件实现PDF文件的预览功能。通过点击预览按钮，获取id后在弹出的dialog中展示PDF内容。Controller层返回PDF数据，完成简单预览的集成。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Vue + ElementUI 项目中使用vue-pdf 实现简单预览

1、安装 vue-pdf

npm install --save vue-pdf

2、在vue页面中导入对应的组件
我这是通过点击预览按钮获取id打开一个dialog来实现

<!--PDF 预览-->

            <el-dialog :title="PDF 预览"
                       :visible.sync="viewVisible" width="80%" center
                       @close='closeDialog'>
                    <div style="margin-bottom: 15px; text-align: right">
                        <el-button type="primary" size="small" @click.stop="previousPage">
                            上一页
                        </el-button>
                        <el-button type="primary" size="small" @click.stop="nextPage">
                            下一页
                        </el-button>
                        <span>当前第{