vue中展示PDF文件详细步骤

1、首先安装vue-pdf

npm install --save vue-pdf

2、在 vue.config.js中配置能加载pdf 的loader

module.exports = {
    configureWebpack: {
        module: {
            rules: [
                {
                    test: /\.(png|jpe?g|gif|pdf)$/i,
                    loader: 'file-loader',
                    options: {
                        name: '[path][name].[ext]',
                    },
                },
            ],
        }

    }
}

第三步：

第四步：在pdffile.vue 中写如下代码即可全部显示PDF

<template>
    <div class="about">
        <pdf
                v-for="i in pdfinfo['numPages']"
                :src="pdfinfo['src']"
                :page="i"
        ></pdf>
    </div>
</template>
<script>
    import pdf from 'vue-pdf'
    import bps from "../assets/PDfFile/bps.pdf"
    export default {
        name: "PDFFile",
        components: {
            pdf
        },
        data() {
            return {
                numPages: 1,
                pdfinfo:{
                    src: bps,
                    numPages:1,
                },
            }
        },
        mounted() {
            this.handelPdf()
        },
        methods: {
            async handelPdf() {
                this.pdfinfo['numPages'] = await pdf.createLoadingTask(this.pdfinfo["src"]).promise.then(pdf => {
                    return pdf.numPages
                })
            }
        }
    }
</script>

效果如下：

如果想一页一页显示可修改第四步中的代码如下：

<template>
    <div >
        <div class="wrap_button">
            <div @click="beforePage">上一页</div>
            <div @click="nextPage">下一页</div>
        </div>
        <div class="pdf">
            <pdf
                ref="pdf"
                :page="page"
                @progress="pdfProcess"
                @page-loaded="overReload"
                @num-pages="numPages"
                @error="errorReload"
                :src="bps">
            </pdf>
        </div>
    </div>
</template>
<script>
    import bps from "../../assets/PDFFile/bps.pdf"
    import pdf from 'vue-pdf'
    export default {
        name: 'Pdf',
        components: {
            pdf
        },
        data() {
            return {
                bps,
                page:1,
                totalPage:1,
            }
        },
        methods:{
            beforePage:function(){
                if(this.page>1){
                    this.page--
                }
            },
            nextPage:function(){
                if(this.page<this.totalPage){
                    this.page++
                }

            },
            pdfProcess:function (number) {
                console.log("pdfProcess",number)
            },
            overReload:function(number){
                console.log("overReload",number)
            },
            numPages:function (number) {
                this.totalPage = number
                console.log("numPages",number)
            },
            errorReload:function (obj) {
                console.log("obj",obj)
            }

        },
    }
</script>

<style>
    .wrap_button{
        width: 100%;
        height: 50px;
        display: flex;
        justify-content: space-between;
    }
    .wrap_button>div{
        width: 100px;
        background-color: deeppink;
        height: 100%;
    }
</style>

点击上一页和下一页翻页