vue-pdf显示所有页数的方法

最新推荐文章于 2025-05-16 16:09:49 发布

月影星云

最新推荐文章于 2025-05-16 16:09:49 发布

阅读量3.4k

点赞数 2

CC 4.0 BY-SA版权

分类专栏： vue-pdf vue 文章标签： vue.js

本文链接：https://blog.csdn.net/yyxy_gis/article/details/121200971

vue 同时被 2 个专栏收录

17 篇文章

订阅专栏

vue-pdf

1 篇文章

订阅专栏

安装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>