Die Verwendung von vue-pdf und die aufgetretenen Fehler

Das Projekt muss die Seite verwenden, um dem Benutzer den Inhalt der PDF-Datei zu präsentieren, aber der Benutzer kann sie nicht nach Belieben herunterladen. Bisher ist mein Herz sehr abgekühlt, sodass ich nicht über ein so praktisches Fenster nachdenken muss.offen. Also endlich vue-pdf gefunden.

Fehler melden

Seien Sie der Erste, der einen Fehler meldet, wenn Sie es zum ersten Mal verwenden

MainTemplate.hooks.hotBootstrap wurde entfernt (verwenden Sie stattdessen Ihr eigenes RuntimeModule)

Nicht kompatibel mit Vue CLI Version 5.x

Bisher zwei Möglichkeiten,

1. Downgrade-Version

2. Komponenten wechseln

Glücklicherweise ist die Vue-CLI-Version des aktuellen Projekts nicht so neu, Sie können sie weiterhin verwenden

Einfache Verpackung von vue-pdf für eine einfache Verwendung

<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>