vue预览pdf

官网 www.npmjs.com/package/vue…

下载安装

npm install --save vue-pdf

code

<template>
    <div style="text-align:center;">
        <pdf 
        ref="pdf"
        :src="url"
        v-for="i in numPages" 
        :key="i"  
        :page="i"
        ></pdf>
    </div>
</template>

<script>
import pdf from 'vue-pdf'
export default {
    name:"50501",
    data(){
        return{
            numPages: null,
            url:"static/profile/50501.pdf"
        } 
    },
       
    components:{
        pdf
    },
     mounted() {
        this.getNumPages()
    },
    methods:{
        getNumPages() {
            let loadingTask = pdf.createLoadingTask(this.url)
            loadingTask.promise.then(pdf => {
                this.numPages = pdf.numPages
            }).catch(err => {
                console.error('pdf 加载失败', err);
            })
        },
    }
}
</script>