vue-pdf解决显示无法显示中文、中文打印预览乱码

vue-pdf解决显示中文乱码和打印预览乱码

1.正常的vue-pdf使用

1.1 安装vue-pdf

cnpm install vue-pdf --save-dev

1.2 简单使用

<template>
  <pdf src="./123.pdf"></pdf>
</template>

<script>
import pdf from 'vue-pdf'

export default {
  components: {
    pdf
  }
}
</script>

1.3 分页、打印

<template>
    <div id="showpdf">
        <el-row>
            <el-col :span="24" style="padding:10px;">
                <div style="width:100%;text-align:center;padding-right:20px;">
                    <el-button type="primary" size="mini" @click="changePage(-1)">首页</el-button>
                    <el-button type="primary" size="mini" @click="changePage(0)">上一页</el-button>
                    <span style=" margin-left:20px;margin-right:20px;">
                        共 {{pageCount}} 页 ，当前第 {{currentPage}} 页
                    </span>
                    <el-button type="primary" size="mini" @click="changePage(1)">下一页</el-button>
                    <el-button type="primary" size="mini" @click="changePage(99999)">尾页</el-button>
                    <el-button v-if="isAuth('input_info_print') " style="float: right;margin-left:10px;" size="mini"
                        type="primary" icon="el-icon-printer" @click="$refs.pdf.print()">打印</el-button>
                </div>
                <div class="main" v-loading="loading">
                    <pdf :src="pdfUrl" :page="currentPage" @progress="loadedRatio = $event"
                        @num-pages="pageCount=$event" @page-loaded="currentPage=$event" @loaded="loadPdfHandler"
                        ref="pdf" class="pdf"></pdf>
                </div>
            </el-col>
        </el-row>
    </div>

</template>

<script>
import pdf from "vue-pdf";
export default {
    data() {
        return {
            pdfUrl: "",
            currentPage: 1,
            pageCount: 0,
            scale: 100, //放大系数
            loadedRatio: 0,
            loading: false,
        };
    },
    components: {
        pdf,
    },
    methods: {
        init(id) {//初始化
            this.pdfUrl = ""; 
            this.showPdf(id);
        },
        loadPdfHandler(e) {//加载分页信息
            this.currentPage = 1; // 加载的时候先加载第一页
            this.pageCount = 1;
        },
        showPdf(id) {//显示pdf信息
            this.loading = true;
            this.pageCount = 1;
            this.currentPage = 1; 
            var curl = `/api/v1/xx/xx/show/${id}`;
            this.$http({
                url: this.$http.adornUrl(curl),
                method: "GET",
                responseType: "blob",
            }).then((res) => {
                var url = window.URL.createObjectURL(new Blob([res.data])); //后端获取pdf文件流
                this.pdfUrl = pdf.createLoadingTask({
                    url: url,
                    cMapUrl: "../../../../static/cmaps/",//加载字体包
                    cMapPacked: true,
                });
                this.loading = false;
            });
        },
        toBig() {//放大缩小
            this.scale += 5;
            this.$refs.wrapper.$el.style.width = parseInt(this.scale) + "%";
        },
        toSmall() {
            if (this.scale == 100) {
                return;
            }
            this.scale += -5;
            this.$refs.wrapper.$el.style.width = parseInt(this.scale) + "%";
        },
        changePage(val) {//翻页
            if (val == 99999) {
                this.currentPage = this.pageCount;
                return;
            }
            if (val == -1) {
                this.currentPage = 1;
                return;
            }
            if (val === 0 && this.currentPage > 1) {
                this.currentPage--;
            }
            if (val === 1 && this.currentPage < this.pageCount) {
                this.currentPage++;
            }
        },
    },
};
</script>  

2.解决无法显示中文

正常情况，不会显示中文的问题。一般出问题的都是票据、合同之类的pdf。
我也是遇到这种pdf的时候，才发现问题。经过各种百度，发现大家使用

import CMapReaderFactory from 'vue-pdf/src/CMapReaderFactory.js';

this.pdfUrl = pdf.createLoadingTask({ url: data.url, CMapReaderFactory })

但是，但是，但是，只是在第一次显示的时候，中文可以显示出来。再次查看，就不能正常显示。
又一顿百度，太失望了，很多人为了这个问题，放弃使用vue-pdf了。当然使用pdf.js和pdfjs-dist也可以解决问题，但是，vue-pdf使用简单，可以自由控制分页、打印等功能，不甘心，就去github vue-pdf上找，结果还真有大神解决了。有兴趣的查看链接：vue-pdf

啰嗦一大堆，看解决方法：

复制cmap文件到/static，直接引用。

this.url= pdf.createLoadingTask({ 
     url: 'http://localhost/11.pdf',
     cMapUrl: '../../../../static/cmaps/', 
     cMapPacked: true
  })

cmap所在位置：

node_modules\vue-pdf\node_modules\pdfjs-dist\cmaps

3. 打印预览中文乱码

更改node_modules\vue-pdf\src\pdfjsWrapper.js文件，
参照：
https://github.com/FranckFreiburger/vue-pdf/pull/130/commits/253f6186ff0676abf9277786087dda8d95dd8ea7
更改后即可。
最后附上效果：

打印预览：

如果解决了你的问题，手动来个赞，让我知道帮助到了你~