解决 jspdf-dist 在预览 pdf 时 一些文字内容丢失

如何解决 jspdf-dist 在预览 pdf 时 一些中文内容丢失 可能是字体文件没有配置或字体文件加载失败

昨天有位朋友最近在做 pdf 的预览 它有一个 pdf 上面有一些用户自行编辑的表格 奇怪的是在浏览器里打开 表格里的数据可以展示 但是在自己的 pdfjs-dist 项目里打开 表格里的内容就消失了

解决方法：

pdfJS.getDocument({
  url: "你的pdf地址",
  cMapUrl: "字体包地址", // + 加入字体包的地址
  cMapPacked: true, // +
});
// 如果自己下的库里没有字体包 可以用在线cdn测试一下 然后再把字体包放到自己的项目里并且引入 用下面的地址替换 cMapUrl即可
// https://unpkg.com/browse/pdfjs-dist@2.0.943/cmaps/

可以f12看一下字体文件加载成功没有 加载成功才行

其实解决方式挺简单的 但是我还是想说说 有兴趣的可以看一下

1、懵逼的开始
当我看到这个问题的时候 我对 jspdf-dist 这个库不熟悉 没用过 于是花了一些时间去看官方文档和朋友的代码 主要关注点在于 库的版本 主要的加载方法 getDocument 看完以后发现没啥问题 于是我怀疑朋友的 jspdf-dist 版本太低导致的 因为我再谷歌浏览器打开 pdf pdf 的内容是没问题的 而且谷歌浏览器应该用的是 pdf.js 预览的 和 jspdf-dist 应该是一样的加载代码 是统一的 所以我不信邪的打开了我的 vue2 项目下载了高版本的 jspdf-dist 使用 由于官方文档略显简陋 高版本的 jspdf-dist 使用方式和低版本的又不一致（主要是 es5 语法和 es6 语法不一致）从我开始弄这个东西 到我能预览 大概花了两个小时 官方大大出一期 demo 吧 球球了

**花了那么多时间的原因：**我在使用的时候习惯性的把 jspdf getDocument 返回的 jspdf 对象放在了 this 上 然后运行时提示我获取 jspdf 的内部变量失败 应该是 this 的响应式导致失败了 百度去下了一堆插件 没有解决 我甚至怀疑源码写的有问题 都没怀疑自己有问题 于是花了一些时间去研究源码 发现没有问题 才怀疑是我把 jspdf 返回的对象挂在 this 上了 Object.defineProperty 代理的 get 方法拿不到它的私有属性 我真是人才

2、预览成功，但是缺失的内容还是没显示
当我预览成功的时候 发现了缺失的内容还是没展示 所以这就肯定不是版本的问题了 其实也早该想到的

不过问题还是没解决 不知不觉已经是 11 点了

3、洗完澡回来 想试一下能不能通过修改源码的加载代码方式 去把丢失的内容加载回来 因为朋友给我说的是他用了 jspdf 的方法去获取了那里的数据 显示 value 是空的 但是表格的定义还在 所以能显示表格 只是里面的内容是空的
于是就去研究了 源码的 render 方法 发现实在是无从下手 睡觉吧

4、本来都打算睡觉了 无意中看到了浏览器控制台的 一段非常不明显的输出(要是整个 warning 提示多好呀 整个打印我还以为是日志) 大概意思是我没有引入 字体 getDocument 传入的参数缺失了 cMapUrl 和 cMapPacked 于是我就找了个在线 cdn 引入 发现就可以预览缺失的内容了

5、朋友的代码是引入了字体文件的 没有显示的原因是因为它把这个文件的引入地址使用的绝对路径 绝对路径在 vue 项目里是直接访问 public 下的 他并没有把 node_modules 下的 pdfjs-dist 内的字体包拿到 public 下 所以没有引入成功 我也没想到是这个原因 他因为写了这个路径 所以 jspdf 没有提示 字体文件引入失败也没有抛异常

官方大大 出个教程吧 球球了 你的这个文档我很难配合你呀