项目场景：

项目需求是 点击弹框展示pdf并支持下载

---

问题描述

这里遇到了 印章无法展示 中文无法展示乱码 bug

---

解决方案：

这里解决问题很简单 只需要按照下面步骤一步步处理即可

第一步：找到我们安装好的 vue-pdf 安装包里的 pdf.worker.js 文件，如图展示路径

找到文件后注释掉此行代码：_this3.setFlags(_util.AnnotationFlag.HIDDEN) 如下放代码

if (data.fieldType === "Sig") {
      data.fieldValue = null;

      // _this3.setFlags(_util.AnnotationFlag.HIDDEN);
    }

此时本地重新运行项目 印证就可以正常展示了

第二步：解决中文不展示问题
在你的 <pdf :src="PdfUrlData" ></pdf> 代码上的src 做处理后就解决了中文不展示的问题

this.PdfUrlData = pdf.createLoadingTask({
    'url':newVal,
    cMapUrl: 'https://unpkg.com/pdfjs-dist@2.0.943/cmaps/',
    cMapPacked: true,
})

下方会贴出我封装的组件源码（支持下载）

<template>
    <div class="PdfPreview">
        <a-modal 
            v-model="PdfPreviewTkData"
            width="720px"
            :confirm-loading="submitButLoading" 
            title="下载回单"
            :okText="'下载'"
            @ok="downLoadPdf"
            @cancel="cancel"
            >
                <pdf  :src="PdfUrlData" ></pdf>
        </a-modal>
    </div>
</template>

<script>
import pdf from 'vue-pdf'
export default {
    components: {pdf},
    props:{
        PdfPreviewTk:{
            type:Boolean,
            default:false,
        },
        PdfUrl:{
            type:String,
            default:'',
        }
    },
    watch:{
        PdfPreviewTk:{
            deep:true,
            handler(newVal,oldVal){
                console.log(newVal)
                this.PdfPreviewTkData = newVal
            }
        },
        PdfUrl:{
            deep:true,
            handler(newVal,oldVal){
                if(newVal){
                    this.PdfUrlData = pdf.createLoadingTask({
                        'url':newVal,
                        cMapUrl: 'https://unpkg.com/pdfjs-dist@2.0.943/cmaps/',
                        cMapPacked: true,
                    })
                }
                this.PdfUrlDataSrc = newVal
            }
        },
    },
    data(){
        return{
            PdfPreviewTkData:this.PdfPreviewTk,
            PdfUrlData:'',
            PdfUrlDataSrc:'',
            submitButLoading:false,
        }
    },
    methods:{

        // 下载pdf

        downLoadPdf(){
            const _this = this
            
            let url = this.PdfUrlDataSrc

            fetch(url).then(function (response) {
                if (response.ok) {
                    return response.arrayBuffer()
                }
                    throw new Error('Network response was not ok.')
            }).then(function (arraybuffer) {
                let blob = new Blob([arraybuffer], {
                type: `application/pdf;charset-UTF-8` // word文档为msword,pdf文档为pdf
                })
                let objectURL = URL.createObjectURL(blob)
                let downEle = document.createElement('a')
                let fname = url.split('/').pop().split('.pdf')[0] // 下载文件的名字
                // let fname = `download` // 下载文件的名字
                downEle.href = objectURL
                downEle.setAttribute('download', fname)
                document.body.appendChild(downEle)
                downEle.click()
            }).catch(function (error) {

            })
        },

        // 关闭弹框
        cancel () {
            
            this.PdfPreviewTkData = false
            this.PdfUrlData = ''
            this.PdfUrlDataSrc = ''
            this.$emit('update:PdfPreviewTk',this.PdfPreviewTkData)
            this.$emit('update:PdfUrl',this.PdfUrlData)
        },
    }
}
</script>

<style lang="less" scoped>
    .PdfPreviewBut{
        margin-top: 20px;
    }
</style>

第三步：这里大家会遇到一个问题 本地跑代码都是好的 但是多人开发项目时 别人npm install 之后代码就会把本地的代码覆盖 这里需要增加一个打包补丁解决

1.安装patch-package：npm i patch-package --save-dev
2.修改package.json，新增命令postinstall:"postinstall": "patch-package"
如：

"scripts": {
    "postinstall": "patch-package"
  },

3.执行命令：npx patch-package 修改的文件夹名字 此处文件夹名字指node_modules中下的文件夹名字
如：npx patch-package pdfjs-dist 这里的 pdfjs-dist 就是我们修改的文件的主文件夹名

4.命令执行结束后查看 根目录下是否生成了 patches 文件夹 且下方有如图的文件

diff --git a/node_modules/pdfjs-dist/build/pdf.worker.js b/node_modules/pdfjs-dist/build/pdf.worker.js
index 58bdf7c..f7010a1 100644
--- a/node_modules/pdfjs-dist/build/pdf.worker.js
+++ b/node_modules/pdfjs-dist/build/pdf.worker.js
@@ -19638,7 +19638,7 @@ class WidgetAnnotation extends Annotation {
 
     if (data.fieldType === "Sig") {
       data.fieldValue = null;
-      this.setFlags(_util.AnnotationFlag.HIDDEN);
+      // this.setFlags(_util.AnnotationFlag.HIDDEN);
     }
   }
 
diff --git a/node_modules/pdfjs-dist/es5/build/pdf.worker.js b/node_modules/pdfjs-dist/es5/build/pdf.worker.js
index 578da90..dc96919 100644
--- a/node_modules/pdfjs-dist/es5/build/pdf.worker.js
+++ b/node_modules/pdfjs-dist/es5/build/pdf.worker.js
@@ -31687,7 +31687,7 @@ var WidgetAnnotation = /*#__PURE__*/function (_Annotation2) {
     if (data.fieldType === "Sig") {
       data.fieldValue = null;
 
-      _this3.setFlags(_util.AnnotationFlag.HIDDEN);
+      // _this3.setFlags(_util.AnnotationFlag.HIDDEN);
     }
 
     return _this3;

如果有代表成功了 你可以在项目里 npm install 验证 是否有补丁包的提示 有 代表 完事大吉了 祝你成功

patch-package 6.4.7
Applying patches...
pdfjs-dist@2.6.347 ✔
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@2.3.2 (node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@2.3.2: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.13 (node_modules\webpack-dev-server\node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.13: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.13 (node_modules\watchpack-chokidar2\node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.13: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})