当前位置:   article > 正文

vue中使用vue-pdf插件显示pdf_vue 浏览器打开pdf指定文件名

vue 浏览器打开pdf指定文件名

最近项目需求需要在vue中预览pdf文件,使用vue-pdf这个插件,并且还有许多方法、属性能进行功能扩展。

一、安装

npm install --save vue-pdf
  • 1

二、基本示例

<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>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21

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

三、API

Props属性

:src  { String/Object }
  • 1

pdf的链接,可以是相对、绝对地址或者是一个pdf的加载任务(后面会讲到);

 :page  Number-default:1
  • 1

需要展示pdf的第几页

:rotate  Number-default:0
  • 1

pdf的旋转角度,‘90’的倍数才有效;

Events回调

@password (updatePassword,reason)

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

//reason:提示('NEED_PASSWORD' or 'INCORRECT_PASSWORD')
  • 1
  • 2
  • 3
  • 4
  • 5
 @progress {Number}
  • 1

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

 @page-loaded {Number}
  • 1

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

 @num-pages {Number}

//监听pdf加载,获取pdf的页数;
  • 1
  • 2
  • 3
 @error {Object}

//pdf加载失败回调;
  • 1
  • 2
  • 3
 @link-clicked {Number}

//单机内部链接时触发;
  • 1
  • 2
  • 3

Public methods公共方法

print(dpi,pageList)

//调用浏览器打印功能;

//dpi打印的分辨率(100)
//pageList需要打印的页面array
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6

Public static methods静态方法

createLoadingTask(src)

//这个方法创建一个当前pdf的加载任务,可以作为:src使用或者公开的获取当前pdf的页面总数;
  • 1
  • 2
  • 3

四、应用

单页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>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52
  • 53
  • 54
  • 55
  • 56
  • 57
  • 58
  • 59
  • 60
  • 61
  • 62
  • 63
  • 64
  • 65
  • 66
  • 67
  • 68
  • 69
  • 70
  • 71
  • 72
  • 73
  • 74
  • 75
  • 76
  • 77
  • 78
  • 79
  • 80
  • 81
  • 82
  • 83
  • 84
  • 85
  • 86
  • 87
  • 88
  • 89
  • 90
  • 91
  • 92
  • 93
  • 94
  • 95
  • 96
  • 97

效果如下图:

线上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>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52
  • 53
  • 54
  • 55
  • 56
  • 57
  • 58
  • 59
  • 60
  • 61
  • 62
  • 63
  • 64
  • 65
  • 66
  • 67
  • 68
  • 69
  • 70
  • 71

效果如下图:

线上demo地址
在这里插入图片描述

声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/2023面试高手/article/detail/172550
推荐阅读
相关标签
  

闽ICP备14008679号