vue-pdf の使用と遭遇した落とし穴

プロジェクトは PDF ファイルの内容をユーザーに提示するためにページを使用する必要がありますが、ユーザーはそれを自由にダウンロードできません。ここまでで私の心はだいぶ冷めたので、そんな都合のいい窓を開けて考える必要はありません。そこでついにvue-pdfを見つけました。

エラーを報告する

初めて使用し始めたときは、最初にエラーを報告してください

MainTemplate.hooks.hotBootstrap は削除されました (代わりに独自の RuntimeModule を使用してください)

Vue cli バージョン 5.x とは互換性がありません

これまでのところ 2 つの選択肢がありますが、

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>