vue——引入vue-pdf实现vue页面内预览pdf文件

目录

• 效果
• 1. 引入vue-pdf
• 2. 页面    

 

正文

参考：https://www.npmjs.com/package/vue-pdf

　　   https://www.cnblogs.com/lodadssd/p/10297989.html

 

 

回到顶部

效果

 

 

回到顶部

1. 引入vue-pdf

 

我的vue版本是2.6.10，vue-pdf版本是4.1.0

npm install --save vue-pdf

 

回到顶部

2. 页面    

<template>
    <div ref="detail">
        <van-loading v-if="loading" type="spinner" style="text-align: center;margin-top: 2rem;"/>
        <div :class="loading?'hide':''">
            <div>
                <pdf
                        v-for="i in numPages"
                        :key="i"
                        :src="src"
                        :page="i"
                        @page-loaded="pageLoaded($event)"
                ></pdf>
            </div>
        </div>
    </div>
</template>

<script>
    import pdf from 'vue-pdf'

    export default {
        name: "detail",
        components: {
            pdf
        },
        data() {
            return {
                loading: true,   // 显示加载效果         
                src: '',
                numPages: undefined, // 总页数
                curPageNum: 0, //当前页
            }
        },
        methods: {
            pageLoaded(e) {
                this.curPageNum = e;
                if (this.curPageNum == this.numPages) { //加载完最后一页
                    this.loading = false;
                }
            },
        },
        mounted() {
            let that = this,
                 url = '***';
            that.$refs.detail.scrollIntoView(true);
            that.src = pdf.createLoadingTask(url); // url是pdf文件的全路径
            that.src.promise.then(pdf => {
                that.numPages = pdf.numPages;
            });
        },
    }
</script>


<style lang="less">
    .hide{
        visibility: hidden;
    }
</style>