vue vue-pdf、pdfobject 展示pdf

vue-pdf

npm install --save vue-pdf

<template>
    <div v-show="fileType === 'pdf'" class="pdf">
        <p class="arrow">
            <span :class="{grey: currentPage==1}" class="turn" @click="changePdfPage(0)">Preview </span>
            {{ currentPage }} / {{ pageCount }}
            <span class="turn" :class="{grey: currentPage==pageCount}" @click="changePdfPage(1)"> Next</span>
            <!-- <el-button type="text" @click="preview(item)">预览</el-button> -->
        </p>
        <pdf
            :src="src"
            :page="currentPage"
            @num-pages="pageCount=$event"
            @page-loaded="currentPage=$event"
            @loaded="loadPdfHandler" 
        />
    </div>
</template>

<script>
import pdf from 'vue-pdf'
export default {
    components: {
        pdf
    },    
    data() {
        return {
            // src: 'http://storage.xuetangx.com/public_assets/xuetangx/PDF/PlayerAPI_v1.0.6.pdf',
            //pdf文件放在public文件夹下
            src: `${window.location.origin}/11.pdf`,
            currentPage: 0, // pdf文件页码
            pageCount: 0, // pdf文件总页数
            fileType: 'pdf' // 文件类型         
        }
    },
    created() {
        this.src = pdf.createLoadingTask(this.src)       
    },
    mounted() {
        // this.getNumPages()
    },
    methods: {
        // 改变PDF页码,val传过来区分上一页下一页的值,0上一页,1下一页
        changePdfPage(val) {
            // console.log(val)
            if (val === 0 && this.currentPage > 1) {
                this.currentPage--
                // console.log(this.currentPage)
            }
            if (val === 1 && this.currentPage < this.pageCount) {
                this.currentPage++
                // console.log(this.currentPage)
            }
        },

        // pdf加载时
        loadPdfHandler() {
            this.currentPage = 1 // 加载的时候先加载第一页
        }
    }
}
</script>

参考网址

pdfobject

npm i pdfobject --save

<template>
    <div>
        <div style="height: 4.5vh; background-color: #c9c9c9;">
            <el-button type="primary" icon="el-icon-back" @click="back">back</el-button>
        </div>
        <div style="height: 95vh; padding: 0; margin: 0;">
            <div id="pdf-content" style="padding: 0; margin: 0;" />
        </div>
    </div>
</template>

<script>
import pdf from 'pdfobject'
export default {
    name: 'ViewPDF',
    props: {
        pdfUrl: {
            type: String,
            default: ''
        }
    },
    data() {
        return {
            pdfTop: 40,
            showTips: true
        }
    },
    beforeMount() {
        console.log('beforeMount', this.pdfUrl)
        var that = this
        that.$nextTick(function() {
            console.log(this.pdfUrl, 'this.pdfUrlthis.pdfUrlthis.pdfUrl')
            pdf.embed(that.pdfUrl, '#pdf-content')
        })
    },
    mounted() {
        console.log(this.props.pdfUrl)
    },
    methods: {
        back() {
            this.$router.push('/index')
        }
    }
}
</script>

<style lang="scss" scoped>
	#pdf-content {
	    width: 100%;
	    height: 100%;
	    top: 0;
	    left: 0%;
	}
</style>