安装vue-pdf

npm install --save vue-pdf

代码如下

<template>
    <div class="wrap">
        <pdf v-for="item in numPages" :key="item" :src="pdfSrc" :page="item"/>
    </div>
</template>
<script>
import pdf from 'vue-pdf'
import CMapReaderFactory from 'vue-pdf/src/CMapReaderFactory.js'
export default {
    components:{
        pdf
    },
    data(){
        return{
            pdfUrl: "http://192.168.0.223:8080/pdf/预报.pdf",
            pdfSrc: "",
            numPages: "",
        }
    },
    mounted(){
        this.getTitlePdfurl();
    },
    methods:{
        getTitlePdfurl(){
            this.pdfSrc = pdf.createLoadingTask({ url: this.pdfUrl, CMapReaderFactory });//解决中文乱码问题
            this.pdfSrc.promise.then((pdf) => {
                this.numPages = pdf.numPages;
            })
        },
    }
}
</script>
<style lang="less" scoped>
.wrap{
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
}
</style>