vue中PDF预览的实现——vue-pdf-app

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