关于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

猜你喜欢