vue-pdf踩坑,第二次打开空白,报错Cannot read properties of undefined (reading 'catch')

坑一:第二次打开空白

原因:引入了CMapReaderFactory.js解决PDF中文不显示的问题。
在你第一次加载PDF的时候,bcmap的返回值是Uint8Array[43366]的数组对象,而第二次预览PDF加载时bcmap的返回值是Uint8Array []的空数组,因为第二次加载时取的是初次加载PDF文件时的语言文件的loadModules的缓存,但是取的过程中导致了失败,返回了空值。

解决方案:在node_modules中找到vue-pdf,src下的CMapReaderFactory文件中增加以下代码:

delete require.cache[require.resolve('./buffer-loader!pdfjs-dist/cmaps/'+query.name+'.bcmap')];

整个CMapReaderFactory.js代码如下:

import { CMapCompressionType } from 'pdfjs-dist/es5/build/pdf.js'

// see https://github.com/mozilla/pdf.js/blob/628e70fbb5dea3b9066aa5c34cca70aaafef8db2/src/display/dom_utils.js#L64

export default function() {

    this.fetch = function(query) {

        return import('./buffer-loader!pdfjs-dist/cmaps/'+query.name+'.bcmap' /* webpackChunkName: "noprefetch-[request]" */)
        .then(function(bcmap) {
            delete require.cache[require.resolve('./buffer-loader!pdfjs-dist/cmaps/'+query.name+'.bcmap')];

            return {
                cMapData: bcmap.default,
                compressionType: CMapCompressionType.BINARY,
            };
        });
    }
};

坑二:打开pdf控制台报错Cannot read properties of undefined (reading 'catch')

解决方案:
在node_modules中找到vue-pdf,src下的pdfjsWrapper.js。将

if ( pdfRender !== null ) {
                if ( canceling )
                    return;
                canceling = true;
                pdfRender.cancel().catch(function(err) {
                    emitEvent('error', err);
                });
                return;
            }

修改为:

if ( pdfRender !== null ) {
                if ( canceling )
                    return;
                canceling = true;
                pdfRender.cancel();
                return;
            }

你可能感兴趣的:(vue-pdf踩坑,第二次打开空白,报错Cannot read properties of undefined (reading 'catch'))