Vue中怎么加载pdf文件
Vue预览pdf文件,我觉得pdfh5方式比较简洁,还有vue-pdf也可以,但是如果文件内容较多的话,vue-pdf就需要做分页处理,就麻烦了;接下来,想分享下我使用pdfh5的代码逻辑。如下:(注:我这边阅读文件是通过打开弹窗,把文件放到弹窗中打开展示,这样模拟文件预览的方式;)1,下载安装依赖;npm install pdfh52,引入css文件;import pdfh5 from 'pdf
·
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中,以免异步问题导致文件出不来;
好了,就这些,希望对大家有所帮助!
更多推荐
已为社区贡献1条内容
所有评论(0)