'this' implicitly.... how to solve this

Question

'this' implicitly has type 'any' because it does not have a type annotation.

I want to preview my pdfFile using pdfjs-dist but I don't know why I can't use this.$refs.pdfViewer.

I followed the steps with the instructor in the video. but encountered this problem.

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);
  }
}

AKX_51685 · Answer

There will not be a correct this scope in the pdfjs callback.

Grab a reference to the canvas before it. (I also flipped the if statement for less nesting and turned your .thens into proper async for clarity.)

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);
}

'this' implicitly.... how to solve this

1 Answers