在用copilot专业版折腾了几个小时后，我总结出了2条宝贵的经验

本文首发于公众号：https://mp.weixin.qq.com/s/4C7RO_JoWZOnFuOVg2Uutw?poc_token=HKzFdGijPucsvuM-j1Q_w1vfH6bGrejcjQvuY7_E

一、问题描述

在web项目中上传了一份PDF后，预览，很多数字变成了方块字。

效果如图：

浏览器控制台报如下警告：

Warning: Failed to load font "g_d0_f2": SyntaxError: Invalid font data in ArrayBuffer.

意思是，内嵌的字体加载有问题。

使用的PDF渲染的依赖包是：pdfjs-dist，其版本为：2.0.489-该版本发布于2017年，确实挺老了。

二、问题排查

在一个较新的项目中，上传同样的文件，能正常渲染，没有报错或警告。

说明，问题出在PDFjs的版本上。升级到2.1.266以上版本就可以解决此问题。

三、问题解决

项目的pdfjs-dist的引入方式是直接引入的build后的文件，也就是没有依赖npm包。

我起初也尝试从https://app.unpkg.com/pdfjs-dist@2.2.228/files/build 中下载了对应的pdf.js和pdf.work.js替换本地的文件。

像这样使用：

import pdfjsLib from './pdf.js';
import PdfjsWorker from './pdf.worker.js' 
if (typeof window !== "undefined" && "Worker" in window) {
pdfjsLib.GlobalWorkerOptions.workerPort = new PdfjsWorker();
}

但是报错。

Uncaught TypeError: Cannot read properties of undefined (reading 'GlobalWorkerOptions')

为什么之前的也是用这种方式，就没问题呢？

原因是：

2.0.489 支持 workerPort 模式（早期版本设计）

在 v2.0.x 到 v2.2.x 之间，PDF.js 提供了一个内部支持的、非标准但实用的接口：

GlobalWorkerOptions.workerPort = new Worker(...)

这允许你传入已构造好的 Worker 实例。

从2.0.489升级到2.2.228，如果在非浏览器环境中升级，要使用npm引入的方式，所以正确的升级步骤为：

1、下载依赖包

npm install pdfjs-dist@2.2.228
# 如果后续报worker-loader的错误，可能需要安装
npm install worker-loader@2.0.0  -D

2、改变导入方式

import * as pdfjsLib from 'pdfjs-dist';
import PdfjsWorker from 'worker-loader!pdfjs-dist/build/pdf.worker.js';

pdfjsLib.GlobalWorkerOptions.workerPort = new PdfjsWorker();

export const cMapUrl = './static/cmaps/';
export default pdfjsLib;

3、升级后，部分API进行了改变，需要修改：

a、getViewport的参数改为对象形式

// getViewport(scale) 改为 getViewport({scale:scale})，比如：
page.getViewport({ scale: 1.5 });

b、getDocument添加promise属性

// 原先：pdfjsLib.getDocument(initObj).then...
// 现在：
pdfjsLib.getDocument(initObj).promise.then...

至此升级完毕。

问题也得到了解决。

再来看效果图：

四、彩蛋+总结

因为我用的IDE是vscode，且是copilot的付费版，能用最新的AI，最开始我直接将问题抛给AI，AI确实很猛，对我的代码和文件一顿操作和修改，但是到浏览器一看，要么就是渲染不出来，要么就报新的错误，反反复复，文件被删了改，改了又改，还是没能解决我的问题。

下面是我选择的模型。

以下是我和AI的对话的部分截图，每次对话都是在产生一个新的问题。

就这样折腾了多个小时，AI依然没有解决我的问题。

我已经失去了对它的信任。那就自己手动升级吧。于是还原之前的代码。根据我上面的步骤手动进行了升级，至此问题解决。

因此，我总结出2条宝贵的经验：

1、在让AI修改你的代码之前，记得先提交一次Git备份！！！这样即使修改错误了，也能还原！

2、作为富有开发经验的程序员，你一定要知道具体的原因和解决方案，因为AI是有需求和指令驱动的，不能太过于依赖AI！

比如上面的问题，其本质就是升级pdfjs-dist到更新一点的版本。

五、参考资料

1、https://segmentfault.com/q/1010000019170034

2、https://app.unpkg.com/pdfjs-dist@2.2.228/files/build

3、https://github.com/mozilla/pdf.js/issues/8960

如果你在web前端开发、面试、前端学习路线有困难可以在下方加我名片。免费答疑，行业深潜多年的技术牛人帮你解决bug。

可提供web前端开发，网站开发、技术咨询、答疑、直播讲座等服务。

祝你能成为一名优秀的WEB前端开发工程师！