Error during font loading: Failed to execute 'postMessage' on 'Worker': ArrayBuffer at index 0 is already detached

[linguo2625469]

 - vue-pdf version 4.0.11
 - vue.js version 2.6.11

import CMapReaderFactory from 'vue-pdf/src/CMapReaderFactory.js' this.vuePdfSrc = pdf.createLoadingTask({url:src,CMapReaderFactory}) after use CMapReaderFactory ,First rendering of PDF file ,Fonts can be realistic. But when I switch the URL of the PDF file, I call again this.vuePdfSrc = pdf.createLoadingTask({url:src,CMapReaderFactory}) Console prompt Warning: Error during font loading: Failed to execute 'postMessage' on 'Worker': ArrayBuffer at index 0 is already detached. and Some fonts cannot be displayed. Is there something wrong with the way I use it? I need to toggle the PDF file on the same page Thank you in advance for your answer

[anlia260]

me too

[linguo2625469]

me too

有什么解决办法吗。。不知道直接去用pdf.js行不行 感觉好麻烦

[weisenb]

help

[kmb1010]

same question，help

[smile-garden]

 - vue-pdf version 4.0.11
 - vue.js version 2.6.11

import CMapReaderFactory from 'vue-pdf/src/CMapReaderFactory.js' this.vuePdfSrc = pdf.createLoadingTask({url:src,CMapReaderFactory}) after use CMapReaderFactory ,First rendering of PDF file ,Fonts can be realistic. But when I switch the URL of the PDF file, I call again this.vuePdfSrc = pdf.createLoadingTask({url:src,CMapReaderFactory}) Console prompt Warning: Error during font loading: Failed to execute 'postMessage' on 'Worker': ArrayBuffer at index 0 is already detached. and Some fonts cannot be displayed. Is there something wrong with the way I use it? I need to toggle the PDF file on the same page Thank you in advance for your answer

same question，help

 - vue-pdf version 4.0.11
 - vue.js version 2.6.11

import CMapReaderFactory from 'vue-pdf/src/CMapReaderFactory.js' this.vuePdfSrc = pdf.createLoadingTask({url:src,CMapReaderFactory}) after use CMapReaderFactory ,First rendering of PDF file ,Fonts can be realistic. But when I switch the URL of the PDF file, I call again this.vuePdfSrc = pdf.createLoadingTask({url:src,CMapReaderFactory}) Console prompt Warning: Error during font loading: Failed to execute 'postMessage' on 'Worker': ArrayBuffer at index 0 is already detached. and Some fonts cannot be displayed. Is there something wrong with the way I use it? I need to toggle the PDF file on the same page Thank you in advance for your answer

我也遇到了 有解决吗 同学

[xiuluo211314]

遇到同样的问题，请问有解决办法吗？

[linguo2625469]

遇到同样的问题，请问有解决办法吗？

放弃了 改后端生成了

[mayparadise]

打印输出 第一个加载数据加载为空，文本域无法显示 刷新，cmap加载出来了，文本域才显示出来

[mayparadise]

解决办法，拷贝cmap文件到本地，直接引用。 this.src = pdf.createLoadingTask({ // url: this.$route.params.srcId, url: 'http://localhost:8887/22.pdf', cMapUrl: '../../../../static/cmaps/', cMapPacked: true})

[loyouyang]

解决办法，拷贝cmap文件到本地，直接引用。 this.src = pdf.createLoadingTask({ // url: this.$route.params.srcId, url: 'http://localhost:8887/22.pdf', cMapUrl: '../../../../static/cmaps/', cMapPacked: true})

太棒了，这个办法，确实有用，非常感谢。

[xvking]

解决办法，拷贝cmap文件到本地，直接引用。 this.src = pdf.createLoadingTask({ url: 'http://localhost:8887/22.pdf', cMapUrl: '../../../../static/cmaps/', cMapPacked: true})

使用这种方式我的pdf文件中填充的内容完全无法显示，请问有没有什么解决办法

[quyong]

temporary fix :

 let src =  pdf.createLoadingTask({
    url: this.pdfUrl,
    cMapUrl: 'https://cdn.jsdelivr.net/npm/[email protected]/cmaps/',
    cMapPacked: true
  })

[gooczy]

原因其实是CMapReaderFactory 对象动态import语言文件的时候缓存了文件，导致第二次取缓存加载时出了问题，把CMapReaderFactory.js的代码改成这样就行了： ` var bcmapName = './buffer-loader!pdfjs-dist/cmaps/'+query.name+'.bcmap'; return import(bcmapName).then(function(bcmap) { //移除缓存的文件 delete require.cache[require.resolve(bcmapName)];

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

`

[weisenb]

好的，谢谢

------------------ 原始邮件 ------------------ 发件人: "FranckFreiburger/vue-pdf" <[email protected]>; 发送时间: 2020年11月1日(星期天) 凌晨0:34 收件人: "FranckFreiburger/vue-pdf"<[email protected]>; 抄送: "不可思议"<[email protected]>;"Comment"<[email protected]>; 主题: Re: [FranckFreiburger/vue-pdf] Error during font loading: Failed to execute 'postMessage' on 'Worker': ArrayBuffer at index 0 is already detached (#229)

原因其实是CMapReaderFactory 对象动态import语言文件的时候缓存了文件，导致第二次取缓存加载时出了问题，把CMapReaderFactory.js的代码改成这样就行了： var bcmapName = './buffer-loader!pdfjs-dist/cmaps/'+query.name+'.bcmap'; return import(bcmapName).then(function(bcmap) { //移除缓存的文件 delete require.cache[require.resolve(bcmapName)]; return { cMapData: bcmap.default, compressionType: CMapCompressionType.BINARY, }; });

— You are receiving this because you commented. Reply to this email directly, view it on GitHub, or unsubscribe.

[a654648262]

好的，谢谢 … ------------------ 原始邮件 ------------------ 发件人: "FranckFreiburger/vue-pdf" <[email protected]>; 发送时间: 2020年11月1日(星期天) 凌晨0:34 收件人: "FranckFreiburger/vue-pdf"<[email protected]>; 抄送: "不可思议"<[email protected]>;"Comment"<[email protected]>; 主题: Re: [FranckFreiburger/vue-pdf] Error during font loading: Failed to execute 'postMessage' on 'Worker': ArrayBuffer at index 0 is already detached (#229) 原因其实是CMapReaderFactory 对象动态import语言文件的时候缓存了文件，导致第二次取缓存加载时出了问题，把CMapReaderFactory.js的代码改成这样就行了： var bcmapName = './buffer-loader!pdfjs-dist/cmaps/'+query.name+'.bcmap'; return import(bcmapName).then(function(bcmap) { //移除缓存的文件 delete require.cache[require.resolve(bcmapName)]; return { cMapData: bcmap.default, compressionType: CMapCompressionType.BINARY, }; }); — You are receiving this because you commented. Reply to this email directly, view it on GitHub, or unsubscribe.

搞出来了没

[weisenb]

好的，谢谢 … ------------------ 原始邮件 ------------------ 发件人: "FranckFreiburger/vue-pdf" <[email protected]>; 发送时间: 2020年11月1日(星期天) 凌晨0:34 收件人: "FranckFreiburger/vue-pdf"<[email protected]>; 抄送: "不可思议"<[email protected]>;"Comment"<[email protected]>; 主题: Re: [FranckFreiburger/vue-pdf] Error during font loading: Failed to execute 'postMessage' on 'Worker': ArrayBuffer at index 0 is already detached (#229) 原因其实是CMapReaderFactory 对象动态import语言文件的时候缓存了文件，导致第二次取缓存加载时出了问题，把CMapReaderFactory.js的代码改成这样就行了： var bcmapName = './buffer-loader!pdfjs-dist/cmaps/'+query.name+'.bcmap'; return import(bcmapName).then(function(bcmap) { //移除缓存的文件 delete require.cache[require.resolve(bcmapName)]; return { cMapData: bcmap.default, compressionType: CMapCompressionType.BINARY, }; }); — You are receiving this because you commented. Reply to this email directly, view it on GitHub, or unsubscribe.

搞出来了没

上面这个方法还没试，可以试试我们现在的解决方法： this.$refs.pdf.forEach(el => { el.pdf.destroy() })

[a654648262]

好的，谢谢 … ------------------原始邮件------------------发件人：“ FranckFreiburger / vue-pdf“ < [email protected] >; 发送时间：2020年11月1日（星期天）凌晨0:34收件人：“ FranckFreiburger / vue-pdf” < [email protected] >；抄送：“不可思议” < [email protected] >;“评论” < [email protected] >; 主题：回复：[FranckFreiburger / vue-pdf]字体加载期间发生错误：无法在“ Worker”上执行“ postMessage”：索引为0的ArrayBuffer已经分离（＃229）原因其实是CMapReaderFactory对象动态导入语言文件的时候缓存了文件，导致第二次取缓存加载时出了问题，把CMapReaderFactory.js的代码改成这样就行了：var bcmapName = './buffer-loader!pdfjs-dist/cmaps/'+query.name+'.bcmap'; return import(bcmapName).then(function(bcmap) { //移除缓存的文件 delete require.cache[require.resolve(bcmapName)]; return { cMapData: bcmap.default, compressionType: CMapCompressionType.BINARY, }; });-如果您收到这是因为你的评论。直接回复此电子邮件，在GitHub上查看，

搞出来了没

上面这个方法还没试，可以试试我们现在的解决方法： this。$ refs.pdf.forEach（el => { el.pdf.destroy（） ））

老哥，我纯属菜鸟阿，请问这个是在哪里加的呢，能不能吧完整的贴出来看一下逻辑。

[gooczy]

vue-pdf下有一个CMapReaderFactory.js的文件啊，你就加一行代码就完了嘛，delete require.cache那行

[yasukusury]

Could the code following resolve the issue? const cMapUrl = '../../../node_modules/pdfjs-dist/cmaps/'; /* ... */ pdf.createLoadingTask({ url: pdfs.url[fileName], cMapUrl: cMapUrl, cMapPacked: true });

[HuntTigerTonight]

解决办法，拷贝cmap文件到本地，直接引用。 this.src = pdf.createLoadingTask({ // url: this.$route.params.srcId, url: 'http://localhost:8887/22.pdf', cMapUrl: '../../../../static/cmaps/', cMapPacked: true})

太棒了，这个办法，确实有用，非常感谢。

不行呀

[HuntTigerTonight]

原因其实是CMapReaderFactory 对象动态import语言文件的时候缓存了文件，导致第二次取缓存加载时出了问题，把CMapReaderFactory.js的代码改成这样就行了： ` var bcmapName = './buffer-loader!pdfjs-dist/cmaps/'+query.name+'.bcmap'; return import(bcmapName).then(function(bcmap) { //移除缓存的文件 delete require.cache[require.resolve(bcmapName)];

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

`

这样改也不行

[Panamer]

在前一个组件 beforeDestroy() { window.location.reload() },

[kakazero7]

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
			}
        })
    }
}

complete CMapReaderFactory.js file

[gouteru]

Hi, I am still facing this issue because I want to use vue-pdf with my cordova app on iOS and Android. Adding "delete require.cache[require.resolve('./buffer-loader!pdfjs-dist/cmaps/' + query.name + '.bcmap')]" into CMapReaderFactory works fine for Chrome browser but it's not working for iOS/Android.

Without delete require.cache[require.resolve('./buffer-loader!pdfjs-dist/cmaps/' + query.name + '.bcmap')] and running on iOS/Android.

When running on iOS, the first time PDF view works and font is displayed properly. but closing pdf file with pdfSrc.destroy() then the second time PDF file displayed without font and warning message "Warning: Error during font loading: The object can not be cloned." is output. Andoid is the same result but the message is slightly different.

Adding delete require.cache[require.resolve('./buffer-loader!pdfjs-dist/cmaps/' + query.name + '.bcmap')] and running on iOS/Android.

"Warning: Error during font loading: Array.prototype.map callback must be a function" is output. and the PDF file displayed without font, it's failed to display font at first time. So it's worse.

Does anyone know how to solve this issue for iOS/Android?

[gouteru]

I have fixed Non webpack

[call-blueming]

下面的代码可以解决问题吗？ const cMapUrl = '../../../node_modules/pdfjs-dist/cmaps/'; /* ... */ pdf.createLoadingTask({ url: pdfs.url[fileName], cMapUrl: cMapUrl, cMapPacked: true });

提示：Error during font loading: unexpected EOF in bcmap

[call-blueming]

解决办法，将cmap文件复制到本地，直接引用。 this.src = pdf.createLoadingTask({ // url: this.$route.params.srcId, url: 'http://localhost:8887/22.pdf', cMapUrl: '../../../../static/cmaps/', cMapPacked: true})

Is there any way not to modify dependent files?

[2269673232]

请问各位朋友一下，这个直接将cmap文件复制到本地不生效是什么原因呢？

[DXG9527]

请问各位朋友一下，这个直接将cmap文件复制到本地不生效是什么原因呢？

我也是复制到本地，然后通过相对路径引用没有效果，我能确定相对路径没有写错，请问你有找到是啥原因吗

[parnzhou]

@HuntTigerTonight 大神，用你删除缓存的方案解决生效了，nb