PDF.js Error: Cannot use the same canvas during multiple render()问题解决

最新推荐文章于 2023-07-21 14:50:23 发布

泡泡大怪兽

最新推荐文章于 2023-07-21 14:50:23 发布

阅读量2.7k

点赞数 1

分类专栏： JavaScript 文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/weixin_45032067/article/details/124851327

版权

在PDF预览中遇到PDF内容丢失或倒置的问题，原因是canvas在多个render操作中被重复使用。错误信息提示不能在同一canvas上进行多个render。分析发现，缩放操作时遍历所有canvas并异步渲染pdf，可能导致上一个任务未完成就开始新的render。解决方案是确保每个canvas的渲染任务在上一个任务完成后才执行，通过调整代码逻辑避免并发渲染，从而修复问题。

摘要由CSDN通过智能技术生成

问题背景：业务在预览pdf文件时，对pdf进行放大、缩小操作，如果操作频率过快或者多次执行页面展示的pdf文件内容丢失，展示不完整，内容倒置等现象。打开控制台发现有报错信息：ERROR Error: Uncaught (in promise): Error: Cannot use the same canvas during multiple render() operations. Use different canvas or ensure previous operations were cancelled or completed. 翻译后大概意思就是，在多个 render() 操作期间不能使用相同的画布，使用不同的画布或确保之前的操作被取消或完成。

原因分析：报错的意思可能就是canvas标签在展示pdf文件内容时，pdf渲染出错，问题可能就是在缩放操作的逻辑代码中有什么操作导致的。

查看代码发现，这里展示的pdf文件没有进行分页展示，所以在缩放操作的时候，去遍历了所有canvas标签，然后执行了pdf.getPage()这个r函数，重新修改canvasde 宽度和长度渲染pdf。page.render(renderContext)是个异步的操作，遍历修改canvas画布渲染pdf可能造成上一个异步渲染操作还未结束又开始新的render，这样就报错了导致pdf渲染出错。

pdfStreamRenderPage = (num) => { // 一串pdf64位的流的放大缩小旋转
      if (self.pageRendering) {
        self.pageNumPending = num;
      } else {

        const co