How to save/download a pdf file from browser’s pdf preview

I am using this sample PDF.

https://www.cheat-sheets.org/saved-copy/http-response-codes-1.pdf

My goal is to download this as a pdf file.

Here is my code so far

const playwright = require('playwright');

(async () => {
  const browser = await playwright.chromium.launch();
  const context = await browser.newContext();
  const page = await context.newPage();

  // await page.emulateMedia({ media: 'print' }); // Doesn't work also.
  await page.emulateMedia({ media: 'screen' });

  await page.goto('https://www.cheat-sheets.org/saved-copy/http-response-codes-1.pdf');

  console.log('Page Visited');

  await page.waitForTimeout(3000); // To wait for the pdf to be full loaded.

  console.log('Timeout Done');

  await page.pdf({ path: `document.pdf` });

  console.log('Document Saved');

  await browser.close();
})();

It does save the document but the content is broken.

Example this is what the document looks like on a browser controlled by playwright.

enter image description here

But this is what was saved locally

enter image description here

Not sure what is going on here.
I tried the screenshot approach and it does behave the same way.
I tried the triggering of ctrl+s but learned that this is not possible due to security reasons. I am a bit lost.

Any help is appreciated.

But my overall goal is to download a pdf file from the pdf preview of the browser.