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
更改后即可。
最后附上效果：

打印预览：

如果解决了你的问题，手动来个赞，让我知道帮助到了你~
————————————————
版权声明：本文为CSDN博主「沙沉海底」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/w546097639/article/details/108472464