关于vue-pdf的使用

作为一个初级前端工程师,遇到了一个棘手的问题,就是在移动端展示pdf文件,当然,遇到不会的第一件事是百度,网上有pdf.js,但是vue中有一个可以偷懒的直接npm的组件,由于我是政府项目,项目代码不能使用,我使用线下自己代码做演示.

第一步是npm install --save vue-pdf

<template>
  <div>
    <div>pdf预览</div>
    <pdf 
      :src="pdfUrl"// src需要展示的PDF地址
       v-for="i in numPages" :key="i" :page="i"> // 多页显示></pdf>
  </div>
</template>
​
<script>
    import pdf from 'vue-pdf'
    export default {
        components: {
            pdf
        },
        data(){
             return{
                    pdfUrl: '',
                    numPages:1, // pdf 文件总页数。
             }
         },
        mounted: function() {

this.getNumPages("http://www.gov.cn/zhengce/pdfFile/2020_PDF.pdf")
        }, 
        methods: {
            getNumPages(url) {
                let loadingTask = pdf.createLoadingTask(url)
                //这个方法创建一个当前pdf的加载任务，可以作为:src使用或者公开的获取当前pdf的页面总数；
                loadingTask.then(pdf => {
                    this.url = loadingTask
                    this.numPages = pdf.numPages
                }).catch((err) => {
                    console.error('pdf加载失败')
                })
            },
        }
    }
</script>

​

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的页面总数；
​
详细讲解:https://www.cnblogs.com/lodadssd/p/10297989.html