AI专业者开发社区 1 号成员
  •  0 回帖  •  25 浏览  •  4 个月前
   

vue中使用vue-pdf插件显示pdf

最近项目需求需要在 vue 中展示 pdf，上网搜索了实现方法，找到 vue-pdf 这个插件非常好用，并且还有许多方法、属性能进行功能扩展。

一、安装

npm install --save vue-pdf

二、基本示例

<template>
<div class="pdf">
  <pdf 
    ref="pdf"
    :src="pdfUrl">
  </pdf>
</div>
</template>
<script>
import pdf from 'vue-pdf'
export default {
  name: 'Pdf',
  components:{pdf},
  data(){
      return {
          pdfUrl:"http://file.dakawengu.com/file/2018-05-29/20180527-tianfeng.pdf",
      }
  }
</script>

只需在组件的 src 属性传入 pdf 的链接就能显示相应的 pdf 文件。

三、API

Props 属性

:srcString/Object

pdf 的链接，可以是相对、绝对地址或者是一个 pdf 的加载任务（后面会讲到）；

 :pageNumber-default:1

需要展示 pdf 的第几页；

:rotateNumber-default:0

pdf 的旋转角度，‘90’的倍数才有效；

Events 回调

@password(updatePassword,reason)

updatePassword: 函数提示需要输入的密码；

reason: 提示（'NEED_PASSWORD' or 'INCORRECT_PASSWORD'）；

 @progressNumber

pdf 的页面的加载进度，Rang[0,1]；

 @page-loadedNumber

pdf 某个页面加载成功回调，number 为页面索引值；

 @num-pagesNumber

监听 pdf 加载，获取 pdf 的页数；

 @errorObject

pdf 加载失败回调；

 @link-clickedNumber

单机内部链接时触发；

Public methods 公共方法

print(dpi,pageList)

调用浏览器打印功能；

  • dpi 打印的分辨率（100）
  • pageList 需要打印的页面 array

Public static methods 静态方法

createLoadingTask(src)

这个方法创建一个当前 pdf 的加载任务，可以作为:src 使用或者公开的获取当前 pdf 的页面总数；

四、应用

单页 pdf 展示及 api 使用

可以进行页数切换、pdf 旋转、部分打印、全部打印、显示加密 pdf 功能；

监听当前页面加载，加载进度；

<template>
<div class="pdf">
  <div class="pdf-tab">
    <div 
      class="btn-def btn-pre"
      @click.stop="prePage"> 上一页 </div>
    <div 
      class="btn-def btn-next"
      @click.stop="nextPage"> 下一页 </div>
    <div 
      class="btn-def"
      @click.stop="clock"> 顺时针 </div>
    <div 
      class="btn-def"
      @click.stop="counterClock"> 逆时针 </div>
    <div 
      class="btn-def"
      @click.stop="pdfPrintAll"> 全部打印 </div>
    <div 
      class="btn-def"
      @click.stop="pdfPrint"> 部分打印 </div>
  </div>
  <div>{{pageNum}}/{{pageTotalNum}}</div>
  <div> 进度：{{loadedRatio}}</div>
  <div> 页面加载成功: {{curPageNum}}</div>
  <pdf 
    ref="pdf"
    :src="pdfUrl"
    :page="pageNum"
    :rotate="pageRotate"
    @password="password"
    @progress="loadedRatio = $event"
    @page-loaded="pageLoaded($event)"
    @num-pages="pageTotalNum=$event" 
    @error="pdfError($event)"
    @link-clicked="page = $event">
  </pdf>
</div>
</template>
<script>
import pdf from 'vue-pdf'
export default {
  name: 'Pdf',
  components:{pdf},
  data(){
      return {
          pdfUrl:"http://file.dakawengu.com/file/2018-05-29/20180527-tianfeng.pdf",
          pageNum:1,
      pageTotalNum:1,
      pageRotate:0,
      // 加载进度
      loadedRatio:0,
      curPageNum:0,
      }
  },
  mounted: function(){},
  methods: {prePage(){
      var p = this.pageNum
      p = p>1?p-1:this.pageTotalNum
      this.pageNum = p
    },
    nextPage(){
      var p = this.pageNum
      p = p<this.pageTotalNum?p+1:1
      this.pageNum = p
    },
    clock(){
      this.pageRotate += 90 
    },
    counterClock(){
      this.pageRotate -= 90 
    },
    password(updatePassword, reason) {
      updatePassword(prompt('password is"123456"'))
      console.log('...reason...')console.log(reason)
      console.log('...reason...') },
    pageLoaded(e){
      this.curPageNum = e
    },
    pdfError(error){console.error(error)
    },
    pdfPrintAll(){
      this.$refs.pdf.print() },
    pdfPrint(){
      this.$refs.pdf.print(100,[1,2])},}
}
</script>

效果如下图：

线上 demo 地址

展示全部 pdf

上面的示例只能显示单页的 pdf，并且 pdf 的总页数也只能在 pdf 加载完成后才能获取。下面介绍 createLoadingTask 的用法，来显示所有 pdf。

<template>
<div class="pdf">
  <div class="pdf-tab">
    <div 
      :class="['btn-def',{'btn-active':activeIndex==index}]"
      v-for="(item,index) in pdfList"
      @click.stop="pdfClick(item.pdfUrl,index)">{{item.title}}</div>
  </div>
  <pdf 
    v-for="i in numPages"
    :key="i"
    :src="pdfUrl"
    :page="i">
  </pdf>
</div>
</template>
<script>
import pdf from 'vue-pdf'
export default {
  name: 'Pdf',
  components:{pdf},
  data(){
      return {
      pdfList:[
        {
          pdfUrl:"https://dakaname.oss-cn-hangzhou.aliyuncs.com/file/2018-12-29/1546049718768.pdf",
          title:"你好，2019 年"
        },
        {
          pdfUrl:"http://file.gp58.com/file/2018-11-14/111405.pdf",
          title:"中信证券观点"
        },
        {
          pdfUrl:"https://dakaname.oss-cn-hangzhou.aliyuncs.com/file/2018-12-28/1546003237411.pdf",
          title:"12 月投资月刊"
        },
        {
          pdfUrl:"https://dakaname.oss-cn-hangzhou.aliyuncs.com/file/2018-12-28/1546003282521.pdf",
          title:"丰岭资本观点"
        },
      ],
      pdfUrl: '',
      numPages:1,
      activeIndex:0,
      }
  },
  mounted: function() {
    this.pdfTask(this.pdfList[0].pdfUrl) },
  methods: {pdfTask(pdfUrl){
        var self = this
        var loadingTask = pdf.createLoadingTask(pdfUrl)  
        loadingTask.then(pdf => {
          self.pdfUrl = loadingTask
          self.numPages = pdf.numPages
        }).catch((err) => {
          console.error('pdf 加载失败')})
      },
    pdfClick(pdfUrl,index){
      if(index == this.activeIndex)return
      this.activeIndex = index
      this.pdfUrl = null
      this.pdfTask(pdfUrl)
    },
  }
}
</script>

效果如下图：

线上 demo 地址