基于pdf.js在页面显示pdf文件，可以录制，但回放时pdf部分显示空白

[hanting001]

No description provided.

[Yuyz0112]

没有使用过 pdf.js。它是基于 iframe 或者 canvas 吗

[hanting001]

应该是canvas，但是pdf是通过远程url获取的

[neusoft-wang]

没有使用过 pdf.js。它是基于 iframe 或者 canvas 吗

pdf.js 应该是基于canvas， 最新的#296。版本的 我使用了一下，可以录制和播放，但是中文被方块所覆盖，这面看了一下怀疑是录制的时候没有将字体等相关信息采集到导致的。

[Yuyz0112]

如果能有一个公网可访问的 URL 供测试会很有帮助

[hanting001]

没有使用过 pdf.js。它是基于 iframe 或者 canvas 吗

pdf.js 应该是基于canvas， 最新的#296。版本的 我使用了一下，可以录制和播放，但是中文被方块所覆盖，这面看了一下怀疑是录制的时候没有将字体等相关信息采集到导致的。

[hanting001]

没有使用过 pdf.js。它是基于 iframe 或者 canvas 吗

pdf.js 应该是基于canvas， 最新的#296。版本的 我使用了一下，可以录制和播放，但是中文被方块所覆盖，这面看了一下怀疑是录制的时候没有将字体等相关信息采集到导致的。

是的，刚才试了一下，确实pdf中文都变成方块了。

[neusoft-wang]

如果能有一个公网可访问的 URL 供测试会很有帮助

就是这样的 http://106.13.213.78/temp/replay_2020_08_26T07_32_38.html

[Yuyz0112]

@neusoft-wang 被录制的页面可以放在公网吗？用个没有敏感信息的中文 pdf？

[neusoft-wang]

@neusoft-wang 被录制的页面可以放在公网吗？用个没有敏感信息的中文 pdf？

使用这个试试 http://106.13.213.78/demo/dist/pdfjs/web/viewer.html?file=http://106.13.213.78/demo/dist/20200429.pdf?tpye=1

[Yuyz0112]

定位到了对应的问题，pdfjs 对于字体渲染的处理很复杂，还需要一点时间具体看看它的 glyph fontChar 和 glyph unicode 是怎么转换的

[neusoft-wang]

定位到了对应的问题，pdfjs 对于字体渲染的处理很复杂，还需要一点时间具体看看它的 glyph fontChar 和 glyph unicode 是怎么转换的

好的 谢谢

[zjsen668]

@Yuyz0112 请问下，这个问题有解决方案了吗？

[Yuyz0112]

http://binary.myriptide.com/record-2020-09-17_02.00.41.mp4

从测试来看已经可以正确加载字体了。pdf.js 不止是中文，只要是 pdf 内的自定义字体都会重新进行封装，目前的解决方案应该是都解决了。

可以用最新的 master 分支测试，录制的时候需要传入 collectFonts: true 的参数。

          rrweb.record({
            emit: event => ...
            recordCanvas: true,
            collectFonts: true
          });

[zjsen668]

测试了一下，文字可以正常显示了，但是播放时候，有时候会与点卡顿。
这个是一个录制的文件，在1-2秒的时候会有卡顿。

[zhaoxm2016]

@zjsen668 你是用什么展示的pdf文件呢

[zhaoxm2016]

按照你说的配置项配置完成之后，PDF打开特别慢，而且控制台一直在输出

这有可能是什么原因呢

[zhaoxm2016]

@Yuyz0112

[zjsen668]

@zjsen668 你是用什么展示的pdf文件呢
我是用的vue-pdf，底层也是pdf.js。

[zjsen668]

想问下，回放pdf空白的问题，各位都解决了吗。

录制时，如果pdf上下滑动，会出现播放时部分空白的问题。

[Yuyz0112]

在最新 master 分支上以下配置可以成功

          rrweb.record({
            emit: event => ...
            recordCanvas: true,
            collectFonts: true
          });

但是可能录制出大量数据。

已经为一些合作伙伴提供了基于场景的高性能 PDF 录制方案，详细可以参考 rrweb 社区计划。

[Azraelj]

请问在iframe内的页面使用pdf.js可以从父级页面正常录制吗