Vue预览pdf文件,我觉得pdfh5方式比较简洁,还有vue-pdf也可以,但是如果文件内容较多的话,vue-pdf就需要做分页处理,就麻烦了;接下来,想分享下我使用pdfh5的代码逻辑。如下:(注:我这边阅读文件是通过打开弹窗,把文件放到弹窗中打开展示,这样模拟文件预览的方式;)

1,下载安装依赖;

       npm install pdfh5

2,引入css文件;

        import pdfh5 from 'pdfh5'

        import 'pdfh5/css/pdfh5.css'

3,使用方法:

HTML中弹窗里面添加防止文件位置的div,设置一个id

 
script中,先引入依赖pdfh5,引入对应的css文件

data中show为控制弹窗的显示与隐藏,pdfh5为实例化对象,totalNum为文件总页数;

获取pdf文件的方法在打开弹窗的时候,放到$nextTick中,以免异步问题导致文件出不来;

好了,就这些,希望对大家有所帮助!

Logo

前往低代码交流专区

更多推荐