我想上传 pdf 文件并在 canvas 中渲染

Question

我想上传 pdf 文件并在 canvas 中渲染它并且可以更改页面 [显示 1 by 1] 不向下滚动，我该怎么办。

试了很多，还是不行，有没有人推荐。

我正在使用 VueJS 和 typescript。

<input @change="onpdf" />

<canvas ref="pdfViewer"></canvas>

这是我以前尝试过的代码，但仍然无法正常工作。

method:{
onpdf(e: any) {
  const file = e.target.files[0];
  if (file.type !== "application/pdf") {
    return;
  }
  this.pdfFile = file;
  const pageNumber = this.page;
  const canvas = this.$refs.pdfViewer as HTMLCanvasElement;
  const fileReader = new FileReader();
  fileReader.onload = function () {
    const pdfData = new Uint8Array(this.result as any);
    const loadingTask = pdfjsLib.getDocument({ data: pdfData });
    loadingTask.promise.then(function(pdf) {
      console.log("PDF loaded");  // It's not work

      pdf.getPage(pageNumber).then(function(page){
        console.log("Page loaded");

        const scale = 0.5;
        const viewport = page.getViewport({scale: scale});

        var context = canvas.getContext("2d")!;
        canvas.height = viewport.height;
        canvas.width = viewport.width;

        const renderContext = {
          canvasContext: context,
          viewport: viewport
        };
        const renderTask = page.render(renderContext);
        renderTask.promise.then(function(){
          console.log("Page rendered")
        });
      });
    }, function(reason){
      console.error(reason);
    });
  };
  fileReader.readAsArrayBuffer(this.pdfFile);
}
}