search

rrweb-io / rrweb

record and replay the web
https://www.rrweb.io/
MIT License
16.54k stars 1.41k forks source link

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

Closed hanting001 closed 3 years ago

Yuyz0112 commented 4 years ago

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

hanting001 commented 4 years ago

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

neusoft-wang commented 4 years ago

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

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

Yuyz0112 commented 4 years ago

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

hanting001 commented 4 years ago

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

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

hanting001 commented 4 years ago

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

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

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

neusoft-wang commented 4 years ago

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

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

Yuyz0112 commented 4 years ago

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

neusoft-wang commented 4 years ago

@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 commented 4 years ago

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

neusoft-wang commented 4 years ago

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

好的 谢谢

zjsen668 commented 4 years ago

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

Yuyz0112 commented 4 years ago

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 commented 4 years ago

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

zhaoxm2016 commented 3 years ago

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

zhaoxm2016 commented 3 years ago

按照你说的配置项配置完成之后，PDF打开特别慢，而且控制台一直在输出 image 这有可能是什么原因呢

zhaoxm2016 commented 3 years ago

@Yuyz0112

zjsen668 commented 3 years ago

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

zjsen668 commented 3 years ago

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

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

Yuyz0112 commented 3 years ago

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

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

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

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

Azraelj commented 2 years ago

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