pdfviewer/pdfshow/index.js

var pdfData = atob('JVBERi0xLjQNJeLjz9MNCjE5ODYgMCBvYmoNPDwvTGluZWFyaXplZCAxL0wgMzM5NzQwNS9PIDE5ODgvRSA3MDI5NzgvTiA5L1QgMzM1NzU2OC9IIFsgNDM4NCAxNTQ4XT4+DWVuZG9iag0gICAgICAgIA14cmVmDQoxOTg2IDIwMA0KMDAwMDAwMDAxNiAwMDAwMCBuDQowMDAwMDA2MTM3IDAwMDAwIG4NCjAwMDAwMDYzMDMgMDAwMDAgbg0KMDAwMDAwNzc2NCAwMDAwMCBuDQowMDAwMDA4MjQyIDAwMDAwIG4NCjAwMDAwMDg1NjAgMDAwMDAgbg0KMDAwMDAwODg2NCAwMDAwMCBuDQowMDAwMDA5MTQwIDAwMDAwIG4NCjAwMDAwMDk0MTYgMDAwMDAgbg0KMDAwMDAwOTYxOSAwMDAwMCBuDQowMDAwMDA5OTYzIDAwMDAwIG4NCjAwMDAwMTAzOTEgMDAwMDAgbg0KMDAwMDAxMDU1NyAwMDAwMCBuDQowMDAwMDEwOTg1IDAwMDAwIG4NCjAwMDAwMTExNTMgMDAwMDAgbg0KMDAwMDAxMTMzMSAwMDAwMCBuDQowMDAwMDExNDQ2IDAwMDAwIG4NCjAwMDAwMTE1NTkgMDAwMDAgbg0KMDAwMDAxMTkxNCAwMDAwMCBuDQowMDAwMDEyMTgzIDAwMDAwIG4NCjAwMDAwMTMwNTYgMDAwMDAgbg0KMDAwMDAxMzE1OCAwMDAwMCBuDQowMDAwMDEzNTI2IDAwMDAwIG4NCjAwMDAwMTM5NTUgMDAwMDAgbg0KMDAwMDAxNDUwMSAwMDAwMCBuDQowMDAwMDE2NjYwIDAwMDAwIG4NCjAwMDAwMTcwMjUgMDAwMDAgbg0KMDAwMDAxOTI0NyAwMDAwMCBuDQowMDAwMDIwOTc1IDAwMDAwIG4NCjAwMDAwMjEyODggMDAwMDAgbg0KMDAwMDAyMTYwOSAwMDAwMCBuDQowMDAwMDIxOTY4IDAwMDAwIG4NCjAwMDAwMjMzMjcgMDAwMDAgbg0KMDAwMDAyNDQ1MCAwMDAwMCBuDQowMDAwMDI1MjgyIDAwMDAwIG4NCjAwMDAwMjU0MDkgMDAwMDAgbg0KMDAwMDAyNjU5NSAwMDAwMCBuDQowMDAwMDI3ODk2IDAwMDAwIG4NCjAwMDAwMzEyMTEgMDAwMDAgbg0KMDAwMDAzMTU0MyAwMDAwMCBuDQowMDAwMDM0ODY2IDAwMDAwIG4NCjAwMDAwMzUxOTggMDAwMDAgbg0KMDAwMDAzNTMyMyAwMDAwMCBuDQowMDAwMDM1NjkyIDAwMDAwIG4NCjAwMDAwMzU4MDUgMDAwMDAgbg0KMDAwMDAzNjA4MCAwMDAwMCBuDQowMDAwMDM2NDA4IDAwMDAwIG4NCjAwMDAwMzY3ODYgMDAwMDAgbg0KMDAwMDAzNzEwOSAwMDAwMCBuDQowMDAwMDM3MzUxIDAwMDAwIG4NCjAwMDAwMzc1ODAgMDAwMDAgbg0KMDAwMDAzNzc1MSAwMDAwMCBuDQowMDAwMDM3OTg4IDAwMDAwIG4NCjAwMDAwMzgyNTAgMDAwMDAgbg0KMDAwMDAzODUwOSAwMDAwMCBuDQowMDAwMDM4ODEwIDAwMDAwIG4NCjAwMDAwNDA1NTcgMDAwMDAgbg0KMDAwMDA0MzM1MSAwMDAwMCBuDQowMDAwMDQ0NzMwIDAwMDAwIG4NCjAwMDAwNzE4MTUgMDAwMDAgbg0KMDAwMDA5NTA1NiAwMDAwMCBuDQowMDAwMTEyMDI0IDAwMDAwIG4NCjAwMDAxMjY1NjUgMDAwMDAgbg0KMDAwMDE0MTcwNiAwMDAwMCBuDQowMDAwMTU2OTQ2IDAwMDAwIG4NCjAwMDAxNzAwOTggMDAwMDAgbg0KMDAwMDE4MzQ5MyAwMDAwMCBuDQowMDAwMTg2MTc0IDAwMDAwIG4NCjAwMDAxODYzMDAgMDAwMDAgbg0KMDAwMDE4NjkyMyAwMDAwMCBuDQowMDAwMTg3MDQ5IDAwMDAwIG4NCjAwMDAxODczMzQgMDAwMDAgbg0KMDAwMDE4NzQ4NSAwMDAwMCBuDQowMDAwMTg3NjA4IDAwMDAwIG4NCjAwMDAxODc2ODcgMDAwMDAgbg0KMDAwMDE4Nzc2NiAwMDAwMCBuDQowMDAwMTg3ODkyIDAwMDAwIG4NCjAwMDAxOTYwODQgMDAwMDAgbg0KMDAwMDE5NjIwMiAwMDAwMCBuDQowMDAwMTk2MzI4IDAwMDAwIG4NCjAwMDAxOTY0NDQgMDAwMDAgbg0KMDAwMDE5NjQ4NSAwMDAwMCBuDQowMDAwMjA3MjY4IDAwMDAwIG4NCjAwMDAyNDQwOTYgMDAwMDAgbg0KMDAwMDI0NTU2MiAwMDAwMCBuDQowMDAwMjQ2NDc4IDAwMDAwIG4NCjAwMDAyNDk4MjQgMDAwMDAgbg0KMDAwMDI0OTkzNiAwMDAwMCBuDQowMDAwMjQ5OTcyIDAwMDAwIG4NCjAwMDAyNTAwNTEgMDAwMDAgbg0KMDAwMDI1MDM4NCAwMDAwMCBuDQowMDAwMjUwNDUzIDAwMDAwIG4NCjAwMDAyNTA1NzEgMDAwMDAgbg0KMDAwMDI1MDYwNyAwMDAwMCBuDQowMDAwMjUwNjg2IDAwMDAwIG4NCjAwMDAyNTEwMjEgMDAwMDAgbg0KMDAwMDI1MTA5MCAwMDAwMCBuDQowMDAwMjUxMjA4IDAwMDAwIG4NCjAwMDAyNTEyNDQgMDAwMDAgbg0KMDAwMDI1MTMyMyAwMDAwMCBuDQowMDAwMjUxNjU2IDAwMDAwIG4NCjAwMDAyNTE3MjUgMDAwMDAgbg0KMDAwMDI1MTg0MyAwMDAwMCBuDQowMDAwMjUxOTU4IDAwMDAwIG4NCjAwMDAyNTE5OTQgMDAwMDAgbg0KMDAwMDI1MjA3MyAwMDAwMCBuDQowMDAwMjUyNDA3IDAwMDAwIG4NCjAwMDAyNTI0NzYgMDAwMDAgbg0KMDAwMDI1MjU5NCAwMDAwMCBuDQowMDAwMjUyNjMwIDAwMDAwIG4NCjAwMDAyNTI3MDkgMDAwMDAgbg0KMDAwMDI1MzA0MyAwMDAwMCBuDQowMDAwMjUzMTEyIDAwMDAwIG4NCjAwMDAyNTMyMzAgMDAwMDAgbg0KMDAwMDI1MzI2NiAwMDAwMCBuDQowMDAwMjUzMzQ1IDAwMDAwIG4NCjAwMDAyNTM2NzkgMDAwMDAgbg0KMDAwMDI1Mzc0OCAwMDAwMCBuDQowMDAwMjUzODY2IDAwMDAwIG4NCjAwMDAyNTM5MDIgMDAwMDAgbg0KMDAwMDI1Mzk4MSAwMDAwMCBuDQowMDAwMjU0MzE1IDAwMDAwIG4NCjAwMDAyNTQzODQgMDAwMDAgbg0KMDAwMDI1NDUwMiAwMDAwMCBuDQowMDAwMjU0NTM4IDAwMDAwIG4NCjAwMDAyNTQ2MTcgMDAwMDAgbg0KMDAwMDI1NDk0OSAwMDAwMCBuDQowMDAwMjU1MDE4IDAwMDAwIG4NCjAwMDAyNTUxMzYgMDAwMDAgbg0KMDAwMDI1NTE3MiAwMDAwMCBuDQowMDAwMjU1MjUxIDAwMDAwIG4NCjAwMDAyNTU1ODQgMDAwMDAgbg0KMDAwMDI1NTY1MyAwMDAwMCBuDQowMDAwMjU1NzcxIDAwMDAwIG4NCjAwMDAyNTU4MDcgMDAwMDAgbg0KMDAwMDI1NTg4NiAwMDAwMCBuDQowMDAwMjU2MjE5IDAwMDAwIG4NCjAwMDAyNTYyODggMDAwMDAgbg0KMDAwMDI1NjQwNiAwMDAwMCBuDQowMDAwMjY4MDkxIDAwMDAwIG4NCjAwMDAyNjgxMzIgMDAwMDAgbg0KMDAwMDI2ODIxMSAwMDAwMCBuDQowMDAwMjY4MjQ3IDAwMDAwIG4NCjAwMDAyNjgzMjYgMDAwMDAgbg0KMDAwMDI2ODY3NCAwMDAwMCBuDQowMDAwMjY4NzQzIDAwMDAwIG4NCjAwMDA
const pdf = { data: pdfData, };
const pageNum = document.querySelector("#page_num");
const pageCount = document.querySelector("#page_count");
const currentPage = document.querySelector("#current_page");
const previousPage = document.querySelector("#prev_page");
const nextPage = document.querySelector("#next_page");
const zoomIn = document.querySelector("#zoom_in");
const zoomOut = document.querySelector("#zoom_out");
const printButton = document.querySelector(".print-button");

const initialState = {
  pdfDoc: null,
  currentPage: 1,
  pageCount: 0,
  zoom: 1,
};

// Render the page
const renderPage = () => {
  // load the first page
  // console.log(initialState.pdfDoc, "pdfDoc");
  initialState.pdfDoc.getPage(initialState.currentPage).then((page) => {
    // console.log("page", page);

    const canvas = document.querySelector("#canvas");
    const ctx = canvas.getContext("2d");
    const viewport = page.getViewport({ scale: initialState.zoom });

    canvas.height = viewport.height;
    canvas.width = viewport.width;

    // Render PDF page into canvas context
    const renderCtx = {
      canvasContext: ctx,
      viewport: viewport,
    };

    page.render(renderCtx);

    pageNum.textContent = initialState.currentPage;
  });
};

// Load the Document
pdfjsLib
  .getDocument(pdf)
  .promise.then((data) => {
    initialState.pdfDoc = data;
    console.log("pdfDocument", initialState.pdfDoc);

    pageCount.textContent = initialState.pdfDoc.numPages;

    renderPage();
  })
  .catch((err) => {
    alert(err.message);
  });

const showPrevPage = () => {
  if (initialState.pdfDoc === null || initialState.currentPage <= 1) return;
  initialState.currentPage--;
  // render the current page
  currentPage.value = initialState.currentPage;
  renderPage();
};

const showNextPage = () => {
  if (
    initialState.pdfDoc === null ||
    initialState.currentPage >= initialState.pdfDoc._pdfInfo.numPages
  )
    return;

  initialState.currentPage++;
  currentPage.value = initialState.currentPage;
  renderPage();
};

// Button Events
previousPage.addEventListener("click", showPrevPage);
nextPage.addEventListener("click", showNextPage);

// Keypress Event
currentPage.addEventListener("keypress", (event) => {
  if (initialState.pdfDoc === null) return;
  // get the key code
  const keycode = event.keyCode ? event.keyCode : event.which;

  if (keycode === 13) {
    // get the new page number and render it
    let desiredPage = currentPage.valueAsNumber;
    initialState.currentPage = Math.min(
      Math.max(desiredPage, 1),
      initialState.pdfDoc._pdfInfo.numPages
    );

    currentPage.value = initialState.currentPage;
    renderPage();
  }
});

// Zoom Events
zoomIn.addEventListener("click", () => {
  if (initialState.pdfDoc === null) return;
  initialState.zoom *= 4 / 3;
  renderPage();
});

zoomOut.addEventListener("click", () => {
  if (initialState.pdfDoc === null) return;
  initialState.zoom *= 2 / 3;
  renderPage();
});

// Print PDF
printButton.addEventListener("click", () => {
  // window.print();
  printJS("canvas", "html");
});