vue?pdf無法顯示中文如何解決

這篇文章主要介紹了vue pdf無法顯示中文如何解決的相關知識，內容詳細易懂，操作簡單快捷，具有一定借鑒價值，相信大家閱讀完這篇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" 
            
            :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無法顯示中文如何解決”知識都有一定的了解，大家如果還想學習更多知識，歡迎關注億速云行業資訊頻道。