vue-pdf的使用与遇到的坑

项目需求使用在页面中为用户呈现pdf文件内容，但不能让用户随意下载。到此为止心已经凉了一大截了，如此便捷的window.open不用想了。所以最后找到了vue-pdf。

报错

刚开始使用就当头一个报错

MainTemplate.hooks.hotBootstrap has been removed (use your own RuntimeModule instead)

与Vue cli version 5.x不兼容

到此为止两个选项，

1、降版本

2、换组件

还好当前项目的Vue cli版本不是那么新，可以继续用

将vue-pdf进行简易封装以便使用

<template>
    <div class="pdf" id="container">
        <vue-pdf ref="pdf" :src="pdfInfo.src" :page="pdfInfo.currentPage" 
        @num-pages="pdfInfo.pageCount=$event"
        @page-load="pdfInfo.currentPage=$event"
        @link-clicked="pageInfo.currentPage=$event"></vue-pdf>
    </div>
</template>

<script>
import vuePdf from "vue-pdf"
// 用于防止中文显示异常
import CMapReaderFactory from "vue-pdf/src/CMapReaderFactory.js"
export default {
    name: "Pdf",
    components: {
        vuePdf
    },
    data(){
        return{
            pdfInfo: {
                src: '',
                currentPage: 0,
                pageCount: 0
            }
        }
    },
    mounted(){
        this.showPdf()
    },
    methods: {
        /**
         * 父子组件获取到pdf地址后调用
         * @param {String} file pdf地址
         */
        showPdf(file){
            this.pdfInfo = {
                // 加载pdf
                src: pdf.creatLoadingTask({url: file, CMapReaderFactory}),
                currentPage: 1,
                pageCount: 0
            }
            // 获取pdf最大页数
            this.pdfInfo.src.promise.then(pdf => {
                // 设置最大页数
                this.pdfInfo.pageCount = pdf.numPages
                // 将pdf信息回传给父组件并赋值
                this.$parent.setPDFPage(this.pdfInfo.currentPage, this.pdfInfo.pageCount)
            })
        },
        /**
         * 返回顶部
         */
        toTop(){
            document.getElementById('container').scrollTop = 0
        },
        /**
         * 父组件中输入页面，进行翻页
         * @param {Number} pageNumber 页码
         */
        changeNumber(pageNumber){
            const reg = /[\D]$/
            pageNumber = pageNumber.toString()
            let number = ''
            // 如果传入的不是一个数字，对传入的信息进行处理
            for(let i = 0; i < pageNumber.length; i++){
                number += pageNumber[i].replace(reg, '')
            }
            pageNumber = number === '' ? 1 : number
            // 判断传入的页数是否超出组大页码
            if(pageNumber > this.pdfInfo.pageCount){
                pageNumber = this.pdfInfo.pageCount
            }else if(pageNumber < 1){
                pageNumber = 1
            }
            this.pdfInfo.currentPage = pageNumber
        },
        /**
         * 父组件中点击上一页下一页进行翻页
         * @param {Number} page 页码
         */
        changePDFPage(page){
            // 上一页
            if(page === 'prev' && this.pdfInfo.currentPage > 1){
                this.pdfInfo.currentPage--
                this.toTop()
            // 下一页
            }else if(page === 'next' && this.pdfInfo.currentPage < this.pdfInfo.pageCount){
                this.pdfInfo.currentPage++
                this.toTop()
            }
        },
        /**
         * 首次进入页面pdf加载
         */
        loadPDFHndler(){
            this.pdfInfo.currentPage = 1
        }
    }
}
</script>

<style lang="scss">
.pdf{

}
</style>