'this'含蓄地......如何解決這個問題-有解無憂

'this' 隱含型別為 'any'，因為它沒有型別注釋。

我想使用 pdfjs-dist 預覽我的 pdfFile，但我不知道為什么我不能使用 this.$refs.pdfViewer。

我按照視頻中教練的步驟進行操作。但是遇到了這個問題。

onpdf(e: any) {
  this.pdfFile = e.target.files[0];
  // Did i miss something here?
  if (this.pdfFile.type == "application/pdf") {
    let fileReader = new FileReader();
    fileReader.onload = function () {
      let pdfData = new Uint8Array(this.result as any);
      let loadingTask = pdfjsLib.getDocument({ data: pdfData });
      loadingTask.promise.then(function (pdf) {
        console.log("PDF loaded");

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

            let scale = 1.5;
            let viewport = page.getViewport({ scale: scale });

            let canvas = this.$refs.pdfViewer; // *this* here is the ploblem
            let context = canvas.getContext("2d");
            canvas.height = viewport.height;
            canvas.width = viewport.width;

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


    <input @change="onpdf"/>

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

uj5u.com熱心網友回復：

回呼中不會有正確的this范圍。pdfjs

在它之前獲取對畫布的參考。（我還翻轉了if陳述句以減少嵌套，并將您.then的 s 轉換為正確async的以便清楚起見。）

onpdf(e: any) {
  const file = e.target.files[0];
  if (file.type !== 'application/pdf') {
    return;
  }
  this.pdfFile = file;
  const canvas: HTMLCanvasElement = this.$refs.pdfViewer;  // <- moved here!
  const fileReader = new FileReader();
  fileReader.onload = async function () {
    const pdfData = new Uint8Array(this.result as any);
    const loadingTask = pdfjsLib.getDocument({data: pdfData});
    const pdf = await loadingTask.promise;
    console.log('PDF loaded');

    const pageNumber = 1;
    const page = await pdf.getPage(pageNumber);
    console.log('Page loaded');
    const scale = 1.5;
    const viewport = page.getViewport({scale});
    const context = canvas.getContext('2d');
    canvas.height = viewport.height;
    canvas.width = viewport.width;

    const renderContext = {
      canvasContext: context,
      viewport,
    };
    const renderTask = page.render(renderContext);
    await renderTask.promise;
    console.log('Page rendered');
  };
  fileReader.readAsArrayBuffer(this.pdfFile);
}

轉載請註明出處，本文鏈接：https://www.uj5u.com/net/504728.html

標籤：javascript 打字稿 pdf Vuejs3

上一篇：自定義rquartopdf輸出檔案名

下一篇：PDF鏈接注釋顏色空間（邊框）