I'm using pdf-lib for PDF documents. I'm starting with a simple goal: user clicks a button and downloads a PDF. It's working, but VS Code is underlining the word download in red and saying "Cannot find name 'download'" from this line:
download(pdfBytes, "pdf-lib_creation_example.pdf", "application/pdf");
screenshot
I downloaded the npm package for downloadjs (1.4.7), so I'm not sure why VS Code isn't recognizing it.
Here's the full code for the page (using SvelteKit):
<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>
Tried rearranging my page code to make sure it wasn't a scope issue. I've been searching on Google for a long time. No videos that cover this type of situation that I can find.