vue pdf二次封裝解決無法顯示中文問題方法詳解

更新時間：2023年01月16日 16:31:53 作者：簡單卟容易

這篇文章主要為大家介紹了vue pdf二次封裝解決無法顯示中文問題方法詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪

前言

vue-pdf 可以實現PDF文件在線預覽并且支持分頁。安裝方式：npm install --save vue-pdf

完整代碼

<template>
    <el-dialog :visible="visible" title="查看PDF" width="1100px" top="2vh" append-to-body @close="handleClose">
        <pdf-viewer 
            v-if="url" 
            style="height: 750px;overflow: auto;"
            :src="url"
            :page="pageData.currentPage"
            @num-pages="pageData.total = $event"
            @page-loaded="pageData.currentPage = $event"
            @loaded="loadPdfHandler()">
        </pdf-viewer>
        <div class="ui-pdf-page" v-if="pageData.total > 1">
            <span @click="changePdfPage(0)" :class="pageData.currentPage == 1 ? '' : 'ui-link'">上一頁</span>
            <span>{{pageData.currentPage + '/' + pageData.total}}</span>
            <span @click="changePdfPage(1)" :class="pageData.currentPage == pageData.total ? '' : 'ui-link'">下一頁</span>
        </div>
    </el-dialog>
</template>
<script>
    import pdfViewer from 'vue-pdf'
    import CMapReaderFactory from 'vue-pdf/src/CMapReaderFactory.js' //解決中文顯示
    export default{
        components: {
            pdfViewer
        },
        name: 'ComPdfView',
        props: {
            src: {
                type: String,
                default: '',
            },
            visible: {
                type: Boolean,
                default: false
            },
        },
        data(){
            return {
                url: '',
                pageData: {
                    currentPage: 0,
                    total: 0,
                }
            }
        },
        watch:{
            visible(val) {
                if (val) {
                    this.url = pdfViewer.createLoadingTask({ url: this.src, CMapReaderFactory });
                }
            }
        },
        methods: {
            handleClose() {
                this.pageData.currentPage = 1;
                this.$emit('update:visible', false);
            },
            changePdfPage (val) {
                if (val === 0 && this.pageData.currentPage > 1) {
                    this.pageData.currentPage--
                }
                if (val === 1 && this.pageData.currentPage < this.pageData.total) {
                    this.pageData.currentPage++
                }
            },
            loadPdfHandler() {
                this.pageData.currentPage = 1;
            }
        }
    }
</script>
<style scoped lang="less">
    .ui-pdf-page span {
        font-size: 12px;
        padding: 0 20px;
        color: #626879;
    }
    .ui-pdf-page span.ui-link {
        color: #3c8cff;
        cursor: pointer;
    }
</style>

解決無法顯示中文問題

關鍵代碼

import pdfViewer from 'vue-pdf'
import CMapReaderFactory from 'vue-pdf/src/CMapReaderFactory.js'
this.url = pdfViewer.createLoadingTask({ url: this.src, CMapReaderFactory });

以上就是vue pdf二次封裝解決無法顯示中文問題方法詳解的詳細內容，更多關于vue pdf封裝中文顯示的資料請關注腳本之家其它相關文章！

您可能感興趣的文章: