---

typora-root-url: public

pdf-previewer

效果图

Project setup

npm install pdf-previewer

使用方法

全局注册

import PdfPreviewer from 'pdf-previewer'
import 'pdf-previewer/dist/pdf-previewer.css'
Vue.use(PdfPreviewer)

局部注册

<script>
  import PdfPreviewer from 'pdf-previewer'
  import 'pdf-previewer/dist/pdf-previewer.css'
  export default {
      name:'xxx',
      components:{PdfPreviewer}
  }
</script>

在项目中使用

<template>
 <div>
     <button @click="openPdf">预览</button>
     <pdf-previewer ref="pdfRef" :file="fileObj" />
 </div>
</template>
<script>
  import PdfPreviewer from 'pdf-previewer'
  import 'pdf-previewer/dist/pdf-previewer.css'
  export default {
      name:'xxx',
      components:{PdfPreviewer},
      data(){
          return {
              fileObj:{
                  fileName:'xxxx',filePath:'xxxxx'
              }
          }
      }
      methods:{
          openPdf(){
              this.$nextTick(()=>{
                  this.$refs.pdfRef.openPDF()
              })
              
          }
      }
  }
</script>

配置项

属性	类型	默认值
file	Object	{ fileName:'turnjs4-api-docs.pdf', filePath:'/turnjs4-api-docs.pdf' }