vue pdf二次封装解决无法显示中文问题方法详解

目录 前言 完整代码 解决无法显示中文问题

前言

vue-p DF 可以实现 PDF文件 在线预览并且支持分页。安装方式： npm install - -s ave vue-pdf

完整代码

<template>
    <el-dia LOG  :visible="visible" t IT le="查看PDF" width="1100px" top="2vh" ap PE nd -t o-body @close="handleClose">
        <pdf-viewer 
             v-if ="url" 
            style="h ei ght: 750px;overflow: auto;"
            :src="url"
            :page="pageData. current Page"
            @num-pages="pageData. total  = $event"
            @page-loaded="pageData.currentPage = $event"
            @loaded="loadPdfHandler()">
        </pdf-viewer>
        <div class="ui-pdf-page" v -i f="pageData.total > 1">
            <span @click="changeP DFP age(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 CMa PR eaderFactory f rom  'vue-pdf/src/CMapReaderFactory.js' //解决中文显示
     export  default{
         component s: {
            pdfViewer
        },
        n am e: '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 &am p; & 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: #3c8 CF f;
        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封装中文显示的资料请关注其它相关 文章 ！

您可能感兴趣的文章: vue在线预览word、excel、pdf、txt、图片的方法实例 Vue实现docx、pdf格式文件在线预览功能 vue中使用vue-pdf组件实现文件预览及相应报错解决 vue+elementUI实现多文件上传与预览功能实战记录(word/PDF/图片/docx/doc/xlxs/txt) vue3如何实现PDF文件在线预览功能 Vue3 + Vue-PDF 实现PDF 文件在线预览实战

总结

以上是 为你收集整理的 vue pdf二次封装解决无法显示中文问题方法详解 全部内容，希望文章能够帮你解决 vue pdf二次封装解决无法显示中文问题方法详解 所遇到的问题。

如果觉得 网站内容还不错， 推荐好友。

查看更多关于vue pdf二次封装解决无法显示中文问题方法详解的详细内容...