JZTXT

web前端pdf.js预览pdf实例创建报错：Array. prototype` contains unexpected enumerable properties

发布时间 2023-04-24 14:25:58作者: herryLo

使用pdf.min.js是预览pdf文件，但是在实例化时异常报错，下面是实例化的代码

var loadingTask = window.pdfjsLib.getDocument(url);
console.log(loadingTask);
this.pageNum = 1;
this.pageRendering = false;
this.pageNumPending = null;
loadingTask.promise.then((pdfDoc_) => {
   this.pdfDoc = pdfDoc_;
   document.getElementById('custom_pdf_viewer_pagecount').textContent =
      '共' + this.pdfDoc.numPages + '页';
   this.renderPage(this.pageNum);
});

以上代码其实没有任何问题，但是报了下面的错误：

details: "Error: The `Array.prototype` contains unexpected enumerable properties: $family, $constructor, each, clone, clean, invoke, associate, link, contains, append, getLast, getRandom, include, combine, erase, empty, flatten, pick, hexToRgb, rgbToHex; thus breaking e.g. `for...in` iteration of `Array`s."
​
message: "The `Array.prototype` contains unexpected enumerable properties: $family, $constructor, each, clone, clean, invoke, associate, link, contains, append, getLast, getRandom, include, combine, erase, empty, flatten, pick, hexToRgb, rgbToHex; thus breaking e.g. `for...in` iteration of `Array`s."
​
name: "UnknownErrorException"
​
stack: "BaseExceptionClosure@http://perso.gmapfp.org/media/com_livresfp/js/libs/pdf.min.js:1:48207\n@http://perso.gmapfp.org/media/com_livresfp/js/libs/pdf.min.js:1:48278\n__w_pdfjs_require__@http://perso.gmapfp.org/media/com_livresfp/js/libs/pdf.min.js:1:628\n@http://perso.gmapfp.org/media/com_livresfp/js/libs/pdf.min.js:1:7596\n__w_pdfjs_require__@http://perso.gmapfp.org/media/com_livresfp/js/libs/pdf.min.js:1:628\n@http://perso.gmapfp.org/media/com_livresfp/js/libs/pdf.min.js:1:5991\n__w_pdfjs_require__@http://perso.gmapfp.org/media/com_livresfp/js/libs/pdf.min.js:1:628\n@http://perso.gmapfp.org/media/com_livresfp/js/libs/pdf.min.js:1:1983\n@http://perso.gmapfp.org/media/com_livresfp/js/libs/pdf.min.js:1:2028\nwebpackUniversalModuleDefinition@http://perso.gmapfp.org/media/com_livresfp/js/libs/pdf.min.js:1:351\n@http://perso.gmapfp.org/media/com_livresfp/js/libs/pdf.min.js:1:362\n"
​
<prototype>: Object { stack: "BaseExceptionClosure@http://perso.gmapfp.org/media/com_livresfp/js/libs/pdf.min.js:1:48207\n@http://perso.gmapfp.org/media/com_livresfp/js/libs/pdf.min.js:1:48278\n__w_pdfjs_require__@http://perso.gmapfp.org/media/com_livresfp/js/libs/pdf.min.js:1:628\n@http://perso.gmapfp.org/media/com_livresfp/js/libs/pdf.min.js:1:7596\n__w_pdfjs_require__@http://perso.gmapfp.org/media/com_livresfp/js/libs/pdf.min.js:1:628\n@http://perso.gmapfp.org/media/com_livresfp/js/libs/pdf.min.js:1:5991\n__w_pdfjs_require__@http://perso.gmapfp.org/media/com_livresfp/js/libs/pdf.min.js:1:628\n@http://perso.gmapfp.org/media/com_livresfp/js/libs/pdf.min.js:1:1983\n@http://perso.gmapfp.org/media/com_livresfp/js/libs/pdf.min.js:1:2028\nwebpackUniversalModuleDefinition@http://perso.gmapfp.org/media/com_livresfp/js/libs/pdf.min.js:1:351\n@http://perso.gmapfp.org/media/com_livresfp/js/libs/pdf.min.js:1:362\n", … }
pagesfp2.js:61:12
pdf.js在其他项目使用过，但在新项目中使用，却报了这个问题，我在网上寻找解决方案，发现有人遇到过类似的问题 github pdf.js 异常报错。
 
在pdf.js的 github issue上，我找到了问题原因，就像报错信息提示的一样，存在js库对 Array.prototype 进行了扩展，pdf.js认为这是在错误地扩展对象和/或数组，并且以一种破坏例如for…的方式进行交互。

解决方法

在控制台上打印 Array.prototype，看看 Array.prototype是不是被扩展，出现了下面的这些方法：

$family, $constructor, each, clone, clean, invoke, associate, link, contains, append, getLast, getRandom

pdf.js认为以上的方法扩展：这是在错误地扩展对象和/或数组，并且以一种破坏例如for…的方式进行交互。

将Array.prototype扩展方法移除，只需要找进行Array.prototype扩展的第三方库，并且在代码中移除它就可以，这样，问题就被解决了。