vue-pdf-embed分页预览解决文字丢失问题

貂蝉空大2026-01-13 10:54

解决 PDF 字体加载问题

在 Vue 项目中集成 vue-pdf-embed 组件时，遇到字体加载失败的问题通常是由于缺少字符映射表（CMap）配置。以下是具体解决方案：

配置 CMap 参数 修改 vue-pdf-embed 的 source 属性，添加 cMapUrl 和 cMapPacked 配置：

javascript 复制代码

<vue-pdf-embed
    v-if="!pdfFail"
    :source="{
        url: getBowserUrl(props.pdfRowData.filePath),
        cMapUrl: 'https://cdn.jsdelivr.net/npm/pdfjs-dist@2.9.359/cmaps/',
        cMapPacked: true
    }"
    @rendered="handleDocumentRender"
    @loading-failed="handlePdfFaid"
/>

关键点说明

cMapUrl 需指向包含 PDF.js 字符映射文件的 CDN 地址，路径中的版本号（如 2.9.359）必须与项目中 pdfjs-dist 的实际版本一致。
cMapPacked: true 表示使用压缩版的 CMap 文件，提升加载效率。

版本匹配方法 检查 package-lock.json 或 yarn.lock 文件，搜索 pdfjs-dist 的版本号，确保 CDN 路径中的版本与之匹配。例如：

json 复制代码

"pdfjs-dist": {
  "version": "2.9.359",
  "resolved": "https://registry.npmjs.org/pdfjs-dist/-/pdfjs-dist-2.9.359.tgz"
}

备选方案 若 CDN 加载不稳定，可将 CMap 文件下载到本地，修改 cMapUrl 为本地路径：

javascript 复制代码

cMapUrl: '/assets/cmaps/'  // 假设文件存放在 public/assets/cmaps 目录

通过以上配置，可有效解决 PDF 文档因字体映射缺失导致的渲染异常问题。