Cannot find name 'download' (after installing downloadjs via npm) #1380

joshhayles · 2023-01-14T22:13:47Z

joshhayles
Jan 14, 2023

Hi everyone! I'm doing a basic 'click a button to download your report' test using SvelteKit. I have it working, but vs code has 'download' underlined in squiggly red and when I hover over it, vs code says "Cannot find name 'download'".

However, like I said, that package is installed, I see it as a dependency in my package.json file.

Any ideas what I'm doing wrong?

Here's the full code for that page:

<head>
    <meta charset="utf-8" />
    <script src="https://unpkg.com/[email protected]"></script>
    <script src="https://unpkg.com/[email protected]"></script>
  </head>

<body>
    <p>Click the button to create a new PDF document with <code>pdf-lib</code></p>
    <button on:click={createPdf}>Create PDF</button>
    <p class="small">(Your browser will download the resulting file)</p>
  </body>

<script>
  import { PDFDocument, StandardFonts, rgb, } from 'pdf-lib';

    async function createPdf() {
      // Create a new PDFDocument
      const pdfDoc = await PDFDocument.create()

      // Embed the Times Roman font
      const timesRomanFont = await pdfDoc.embedFont(StandardFonts.TimesRoman)

      // Add a blank page to the document
      const page = pdfDoc.addPage()

      // Get the width and height of the page
      const { width, height } = page.getSize()

      // Draw a string of text toward the top of the page
      const fontSize = 30
      page.drawText('Creating PDFs in JavaScript is awesome!', {
        x: 50,
        y: height - 4 * fontSize,
        size: fontSize,
        font: timesRomanFont,
        color: rgb(0, 0.53, 0.71),
      })

      // Serialize the PDFDocument to bytes (a Uint8Array)
      const pdfBytes = await pdfDoc.save()

      // Trigger the browser to download the PDF document
      download(pdfBytes, "pdf-lib_creation_example.pdf", "application/pdf");
    }

</script>

<style>
body {
  width: 100vw;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

p {
  font-family: helvetica;
  font-size: 24px;
  text-align: center;
  margin: 25px;
}

.small {
  font-family: helvetica;
  font-size: 18px;
  text-align: center;
  margin: 25px;
}

button {
  background-color: #008CBA;
  border: none;
  color: white;
  padding: 15px 32px;
  text-align: center;
  font-size: 16px;
}
</style>

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Uh oh!

Cannot find name 'download' (after installing downloadjs via npm) #1380

Uh oh!

{{title}}

Uh oh!

Replies: 0 comments

Select a reply

Uh oh!

Uh oh!

Cannot find name 'download' (after installing downloadjs via npm) #1380

Uh oh!

joshhayles Jan 14, 2023

Replies: 0 comments

joshhayles
Jan 14, 2023