vue中实现PDF的预览——vue-pdf-app
关于vue中实现PDF的预览已经不是第一次遇到了,之前在做本科毕业设计的时候就需要一个PDF预览效果,也只是在网上随便找了一个能用的用。前段时间帮老师做项目的时候又需要实现一个PDF预览的功能,才又仔细找了一下PDF预览的组件。下面就来讲一下vue-pdf-app这个组件吧。这个组件的效果非常符合我的项目要求
对于这个组件首先需要做的就是安装,这里就讲一下npm安装,项目是vue2的版本,也有vue3版本的这里就不做介绍。
npm i vue-pdf-app
安装完成之后就可以来引入这个组件到自己的项目中使用了。下面是官方给的一个例子。``
<template> <vue-pdf-app pdf="http://example.com/sample.pdf"></vue-pdf-app> </template> <script> import VuePdfApp from "vue-pdf-app"; // import this to use default icons for buttons import "vue-pdf-app/dist/icons/main.css"; export default { components: { VuePdfApp } }; </script>
但是当我在demo项目中测试的时候,这个组件根本就不会显示出来,自己也是摸索了半天都没有发现为什么这个pdf组件为什么不显示。后来在下载了官方给的一个example例子之后,一点点的分析删除一些代码才发现,这个组件必须要设置CSS样式中的高度,只有设置了高度之后这个组件就会显示出来。下面是我写的一个例子
<template> <div id="ppp"> <vue-pdf-app :pdf="pdf" theme="dark" :config="config"></vue-pdf-app> </div> </template> <script> import VuePdfApp from "vue-pdf-app"; import "vue-pdf-app/dist/icons/main.css"; export default { components: { VuePdfApp }, props:{ // pdf:String }, data() { return { pdf: "http://example.com/sample.pdf", config: { toolbar: { toolbarViewerRight: false }, secondaryToolbar: false }, } }, }; </script> <style scoped> #ppp { height: 100%; text-align: center; } </style>
我还在例子中配置了这个组件导航栏,导航栏有很多功能,可以根据自己需要进行配置。这个组件的功能非常多,自己也没有进行深入研究,需要的时候自己去看看API就行了。
下面附上组件的github地址:GitHub - sandanat/vue-pdf-app: VUEjs v2 PDF viewer based on Mozilla's PDFJS