vue3 pdfjs-dist 在线预览报错

vue3 + pdfjs-dist 渲染pdf，数据渲染到canvas画布上报了一个错

index.vue:55 Uncaught (in promise) TypeError: renderTask.then is not a function at index.vue:55:10

具体代码是：

function showPdf(pdfDoc, pageNum) {
  pdfDoc.getPage(pageNum).then((page) => {
  
    // 设置canvas相关的属性
    const canvas = renderContext.value;
    const ctx = canvas.getContext("2d");
    const dpr = window.devicePixelRatio || 1;
    const bsr =
      ctx.webkitBackingStorePixelRatio ||
      ctx.mozBackingStorePixelRatio ||
      ctx.msBackingStorePixelRatio ||
      ctx.oBackingStorePixelRatio ||
      ctx.backingStorePixelRatio ||
      1;
    const ratio = dpr / bsr;
    const viewport = page.getViewport({ scale: 1 });
    canvas.width = viewport.width * ratio;
    canvas.height = viewport.height * ratio;
    canvas.style.width = viewport.width + "px";
    canvas.style.height = viewport.height + "px";
    ctx.setTransform(ratio, 0, 0, ratio, 0, 0);
    
    const context = {
      canvasContext: ctx,
      viewport: viewport,
    };
    // 数据渲染到canvas画布上
    const renderTask = page.render(context);

    console.log('renderTask', renderTask)

    renderTask.then(function () {
        console.log('Page rendered');
    });
  });
}

打印console.log('renderTask', renderTask)，看一下renderTask是不是一个promise，如果有promise的话不应该报错的，promise是有then函数的。

所以可以看到里面有promise,而不是本身就是promise。

应该这样写

// 数据渲染到canvas画布上
const renderTask = page.render(context);

console.log('renderTask', renderTask)

renderTask.promise.then(function () {
    console.log('Page rendered');
});

这样就解决了这个问题。pdf渲染完成就直接进入此回调。