如何判断 PDF.JS 是否完成渲染？

2024-08-04 10:58:32

如何判断 PDF.JS 是否完成渲染？

你是否遇到过这样的情况：满心期待地使用 PDF.JS 将 PDF 页面渲染到 Canvas 元素后，准备将其转换为图片保存或展示，却发现图片只是一片空白？你尝试了 document.ready 和 window.load 事件，试图在页面加载完成后再执行转换操作，但问题依然存在？

别担心，你并不是唯一一个遇到这个问题的人。这很可能是因为你的代码在 PDF.JS 完成渲染之前就开始捕捉 Canvas 的内容了。让我们深入探讨这个问题，并提供解决方案，帮助你准确判断 PDF.JS 何时完成渲染，从而避免“图片空白”的尴尬。

问题根源：异步操作与代码执行顺序

首先，我们需要了解 JavaScript 中异步操作的概念。简单来说，异步操作是指不会立即返回结果的操作。当我们调用一个异步函数时，JavaScript 引擎会将该操作放入任务队列中，然后继续执行后续代码，而不会等待异步操作完成。

在使用 PDF.JS 渲染 PDF 页面时，page.render() 方法就是一个典型的异步操作。当你调用 page.render() 后，PDF.JS 会将渲染任务交给浏览器后台处理，而不会阻塞后续代码的执行。

现在，让我们回顾一下你可能编写的代码：

page.render(renderContext);
var myImage = new Image();
myImage.src = document.getElementById('my-canvas-id').toDataURL();
$('body').append(myImage);

这段代码的逻辑看似没有问题：渲染 PDF 页面，获取 Canvas 内容，将其转换为图片，最后将图片添加到页面中。然而，由于 page.render() 是异步执行的，当代码执行到 toDataURL() 获取 Canvas 内容时，渲染工作可能尚未完成，因此你获取到的只是一个空白的图片数据。

解决方案：利用 Promise 监听渲染完成事件

为了解决这个问题，我们需要利用 PDF.JS 提供的 renderTask 对象。当我们调用 page.render() 方法时，它会返回一个 renderTask 对象，该对象包含一个 promise 属性。promise 是 JavaScript 中用于处理异步操作的一种机制，它代表了一个异步操作最终完成或失败的结果。

renderTask.promise 会在渲染完成后被解决 (resolve)。我们可以通过监听 promise 的状态来判断渲染是否完成，并在渲染完成后执行获取图片数据的操作：

const renderTask = page.render(renderContext);

renderTask.promise.then(() => {
  // 渲染完成后执行的代码
  var myImage = new Image();
  myImage.src = document.getElementById('my-canvas-id').toDataURL();
  $('body').append(myImage);
}).catch((error) => {
  // 处理渲染过程中可能出现的错误
  console.error('PDF 渲染失败:', error);
});

在这段代码中：

我们首先调用 page.render() 方法并获取 renderTask 对象。
我们使用 .then() 方法监听 renderTask.promise 的状态。当 promise 被解决时，表示渲染已完成，.then() 方法中的回调函数会被执行。
在回调函数中，我们可以安全地获取 Canvas 的内容并将其转换为图片，因为此时渲染工作已经完成。
我们还使用了 .catch() 方法来捕获渲染过程中可能出现的错误，以便进行相应的处理。