解决 Vue3 项目中使用 pdfjs-dist 在旧版浏览器中的兼容性问题

问题描述

360极速浏览器13.5打不开网站，控制台报错。经过排查发现是pdfjs-dist版本问题。

错误 t.split().at is not a function 表明在浏览器内核版本 86.0.420.198 中，Array.prototype.at() 方法不可用。这是因为：

• at() 方法是 ES2022 新增的数组方法
• Chrome 86 及更早版本不支持此方法
• pdfjs-dist 库在某些版本中使用了这个新特性

解决方案

方案1：使用 polyfill

在项目的入口文件（如 main.js）中添加 polyfill：

// 在引入 pdfjs-dist 之前添加 polyfill
if (!Array.prototype.at) {Array.prototype.at = function(index) {// 支持负数索引index = Math.trunc(index) || 0;if (index < 0) index += this.length;if (index < 0 || index >= this.length) return undefined;return this[index];};
}// 然后引入 pdfjs-dist
import * as pdfjs from 'pdfjs-dist';

方案2：降级 pdfjs-dist 版本

使用更兼容旧版浏览器的 pdfjs-dist 版本：

npm uninstall pdfjs-dist
npm install pdfjs-dist@2.12.313  # 这是一个已知兼容性较好的版本

方案3：配置 Babel 转换

如果你使用 Vue CLI 或类似的构建工具，可以配置 Babel 来转换新语法：

1. 安装 @babel/plugin-proposal-array-at 插件：

   npm install --save-dev @babel/plugin-proposal-array-at
   

2. 在 babel.config.js 中添加：

   module.exports = {plugins: ['@babel/plugin-proposal-array-at']
   };
   

方案4：使用 core-js 进行全局 polyfill

core-js是一个为JavaScript提供polyfill（垫片/补丁）的库，它允许开发者在旧版浏览器中使用最新的ECMAScript特性。这个库通过社区提供的代码片段，使得不兼容某些新特性的浏览器能够使用这些新特性。例如，ES6时期诞生的Promise、Set或ES7提供的Array.prototype.includes等，都可以通过core-js在不支持这些特性的浏览器上运行。
https://corejs-doc.netlify.app/zh/

1. 安装 core-js：

   npm install core-js
   

2. 在项目入口文件顶部添加：

   import 'core-js/actual/array/at';
   

最佳实践建议

对于 Vue3 项目，推荐组合使用方案1和方案4，这样可以确保不仅解决当前问题，还能为其他可能的 ES 新特性提供兼容支持。

如果可能，也可以考虑提示用户升级浏览器，因为 Chrome 86 已经是较旧的版本，许多现代 Web 特性可能无法支持。

验证解决方案

实施上述任一解决方案后，在目标浏览器中重新加载应用，错误应该不再出现。如果问题仍然存在，可能需要检查是否有其他不兼容的 ES 新特性被使用。