vue——引入vue-pdf實現vue頁面內預覽pdf文件

參考：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>