apps/web/test5.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 5</title>
    <script type="text/javascript" src="/dist/pdf-lib.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/test4.html'">
        Prev
      </button>
      <button onclick="test()">Run Test</button>
      <button onclick="window.location.href = '/apps/web/test6.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, minionsBananaAlphaBytes] = await Promise.all([
        fetchAsset('pdfs/with_large_page_count.pdf'),
        fetchAsset('images/minions_banana_alpha.png'),
      ]);

      const pdfDoc = await PDFDocument.load(inputPdfBytes);

      const timesRomanFont = await pdfDoc.embedFont(
        StandardFonts.TimesRomanBoldItalic,
      );
      const minionsBananaImage = await pdfDoc.embedPng(minionsBananaAlphaBytes);
      const minionsBananaDims = minionsBananaImage.scale(0.5);

      const pages = pdfDoc.getPages();

      pages.forEach((page) => {
        const { width, height } = page.getSize();
        page.drawImage(minionsBananaImage, {
          ...minionsBananaDims,
          x: width / 2 - minionsBananaDims.width / 2,
          y: height / 2 - minionsBananaDims.height / 2,
        });
      });

      // Interleave new pages between all existing ones
      pages.forEach((_, idx) => {
        const newPage = pdfDoc.insertPage(2 * idx + 1, [500, 150]);

        const fontSize = 24;
        const { width, height } = newPage.getSize();

        newPage.setFont(timesRomanFont);
        newPage.setFontSize(fontSize);

        const text = 'This page was interleaved by pdf-lib!';
        const textWidth = timesRomanFont.widthOfTextAtSize(text, fontSize);
        const textHeight = timesRomanFont.heightAtSize(fontSize);

        newPage.drawText(text, {
          x: width / 2 - textWidth / 2,
          y: height / 2 - textHeight / 2,
          color: rgb(0.7, 0.4, 0.9),
        });
      });

      const pdfBytes = await pdfDoc.save();

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