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封装中文显示的资料请关注其它相关文章！

• 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 文件在线预览实战

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！