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

最新推荐文章于 2024-04-23 11:30:02 发布

Harvey07

最新推荐文章于 2024-04-23 11:30:02 发布

阅读量6k

点赞数

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

本文链接：https://blog.csdn.net/Harvey07/article/details/90053232

版权

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

摘要由CSDN通过智能技术生成

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>