How did you display PDF documents directly on a page, did you use a library?

To display PDF documents directly on a web page, the PDF.js library developed by Mozilla is often used. It allows rendering PDFs in HTML5 canvas without the need for plugins.

Example of using PDF.js:

<div id="pdf-container"></div>
<script src="https://mozilla.github.io/pdf.js/build/pdf.js"></script>
<script>
  const url = 'example.pdf';
  const container = document.getElementById('pdf-container');

  pdfjsLib.getDocument(url).promise.then(pdf => {
    pdf.getPage(1).then(page => {
      const viewport = page.getViewport({ scale: 1.5 });
      const canvas = document.createElement('canvas');
      const context = canvas.getContext('2d');
      canvas.height = viewport.height;
      canvas.width = viewport.width;
      container.appendChild(canvas);

      const renderContext = {
        canvasContext: context,
        viewport: viewport
      };
      page.render(renderContext);
    });
  });
</script>

There are also ready-made React components and other wrappers for easier integration.