View PDF files

Last updated: 01/05/2025

Resources:

• https://cdnjs.cloudflare.com/ajax/libs/pdf.js/3.11.174/pdf.min.js 
• https://cdnjs.cloudflare.com/ajax/libs/pdf.js/3.11.174/pdf.worker.min.js 

// Last updated: 01/05/2025, 07:14:57 UTC
// Resources:
//   https://cdnjs.cloudflare.com/ajax/libs/pdf.js/3.11.174/pdf.min.js
//   https://cdnjs.cloudflare.com/ajax/libs/pdf.js/3.11.174/pdf.worker.min.js

async function showPdf (file, password) {
  document.body.style = "background: grey; padding:5px;"
  document.body.innerHTML = '<div id="pageContainer"></div>'
  var PDF_PATH = file;
  var SVG_NS = 'http://www.w3.org/2000/svg';
  document.title = PDF_PATH

  function buildSVG(viewport, textContent) {
    var svg = document.createElementNS(SVG_NS, 'svg:svg');
    svg.setAttribute('width', viewport.width + 'px');
    svg.setAttribute('height', viewport.height + 'px');
    svg.setAttribute('font-size', 1);

    textContent.items.forEach(function (textItem) {

      if (textItem.str.trim().length === 0){
        return
      }

      var tx = pdfjsLib.Util.transform(
          pdfjsLib.Util.transform(viewport.transform, textItem.transform),
          [1, 0, 0, -1, 0, 0]);
      var style = textContent.styles[textItem.fontName];
      // adding text element
      var text = document.createElementNS(SVG_NS, 'svg:text');
      text.setAttribute('transform', 'matrix(' + tx.join(' ') + ')');
      text.setAttribute('font-family', style.fontFamily);
      text.setAttribute('fill-opacity', 0);
      text.textContent = textItem.str;
      svg.appendChild(text);
    });
    return svg;
  }

  var otherParams = password ? { password } : {}
  var loadingTask = pdfjsLib.getDocument({url: PDF_PATH, ...otherParams });
  loadingTask.promise.then(function (pdfDocument) {
    for (let i = 0; i < pdfDocument.numPages; i++) {
      const div = document.createElement("div")
      div.id = "page-" + i
      div.style = "border: 1px solid black; background: white; margin-bottom: 3px; relative"
      document.getElementById('pageContainer').appendChild(div);
      pdfDocument.getPage(i + 1).then(function (page) {
        const normalViewport = page.getViewport({ scale: 1.0 })
        const viewport = page.getViewport({ scale: window.innerWidth / normalViewport.width });

        const scale = [
          viewport.width / normalViewport.width,
          viewport.height / normalViewport.height
        ]

        page.getTextContent().then(function (textContent) {
          const parentDiv = document.getElementById(div.id)
          parentDiv.style.height = `${viewport.height}px`
          parentDiv.style.width = `${viewport.width}px`

          const pageDiv = document.createElement("div")
          pageDiv.style = "position: relative; height: 100%;";

          parentDiv.appendChild(pageDiv)

          const canvas = document.createElement('canvas')
          canvas.style = "width: 100%; height: 100%; position: absolute; top: 0px; left: 0px; background: white;"
          canvas.height = viewport.height
          canvas.width = viewport.width
          pageDiv.appendChild(canvas)
          page.render({
            canvasContext: canvas.getContext('2d'),
            viewport: viewport
          })

          var svg = buildSVG(viewport, textContent);
          svg.style = "opacity: 1; width: 100%; height: 100%; position: absolute; top: 0px; left: 0px; z-index: 200"
          pageDiv.appendChild(svg);
        }).then(() => {
          page.getAnnotations().then(function (annotations) {
            const pageDiv = document.getElementById(div.id).lastChild
            annotations.forEach(annotation => {

              const link = document.createElement("a")
              link.href = annotation.url
              const button = document.createElement("button")
              const rect = annotation.rect
              link.style = `display: block; position: absolute; left: ${rect[0]*scale[0]}px; z-index:400;
            bottom: ${rect[1]*scale[1]}px;`
              button.style = `opacity: 0; width: ${(rect[2]-rect[0])*scale[0]}px;
              height: ${(rect[3]-rect[1])*scale[1]}px;`
              button.innerText = ""

              link.appendChild(button)
              pageDiv.appendChild(link);
            })
          })
        });
      });
    }
  }).then(done()).catch(error => {
    console.error(error.details)
    doneError(error)
  })
}

try {
  showPdf(file, password)
} catch (error){
  console.error(error.details)
  doneError(error)
}