apps/web/test8.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta
      http-equiv="Content-Security-Policy"
      content="
        default-src 'self' 'unsafe-inline' blob: resource:;
        object-src 'self' blob:;
        frame-src 'self' blob:;
      "
    />
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <link rel="stylesheet" type="text/css" href="/apps/web/index.css" />
    <title>Test 8</title>
    <script type="text/javascript" src="/dist/pdf-lib.min.js"></script>
    <script type="text/javascript" src="/apps/web/utils.js"></script>
  </head>

  <body>
    <div id="button-container">
      <button onclick="window.location.href = '/apps/web/test7.html'">
        Prev
      </button>
      <button onclick="test()">Run Test</button>
      <button onclick="window.location.href = '/apps/web/test9.html'">
        Next
      </button>
    </div>
    <div id="animation-target"></div>
    <iframe id="iframe"></iframe>
  </body>

  <script type="text/javascript">
    startFpsTracker('animation-target');

    const fetchAsset = (asset) =>
      fetch(`/assets/${asset}`)
        .then((res) => res.arrayBuffer())
        .then((res) => new Uint8Array(res));

    const renderInIframe = (pdfBytes) => {
      const blob = new Blob([pdfBytes], { type: 'application/pdf' });
      const blobUrl = URL.createObjectURL(blob);
      document.getElementById('iframe').src = blobUrl;
    };

    async function test() {
      const { PDFDocument, rgb, StandardFonts } = PDFLib;

      const [inputPdfBytes] = await Promise.all([
        fetchAsset(
          'pdfs/with_newline_whitespace_in_indirect_object_numbers.pdf',
        ),
      ]);

      const pdfDoc = await PDFDocument.load(inputPdfBytes);

      const helveticaFont = await pdfDoc.embedFont(StandardFonts.Helvetica);

      const pages = pdfDoc.getPages();

      const [firstPage] = pages;

      const { width, height } = firstPage.getSize();
      const text = 'pdf-lib is awesome!';
      const textWidth = helveticaFont.widthOfTextAtSize(text, 75);
      firstPage.moveTo(width / 2 - textWidth / 2, height - 100);
      firstPage.setFont(helveticaFont);
      firstPage.setFontSize(75);
      firstPage.setFontColor(rgb(1, 0, 0));
      firstPage.drawText(text);

      pages.forEach((page, idx) => {
        page.moveTo(10, 10);
        page.setFont(helveticaFont);
        page.setFontSize(17);
        page.setFontColor(rgb(1, 0, 0));
        page.drawText(`${idx + 1} / ${pages.length}`);
      });

      const pdfBytes = await pdfDoc.save();

      renderInIframe(pdfBytes);
    }
  </script>
</html>