Back to packages list

Vals using jspdf

Description from the NPM package:
PDF Document creation from JavaScript
1
2
3
4
5
6
7
8
9
import { jsPDF } from "npm:jspdf";
export const helloWorldPDF = async (req: Request) => {
const doc = new jsPDF();
doc.text("Hello world!", 10, 10);
return new Response(doc.output(), {
headers: { "Content-Type": "application/pdf" },
});
};
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
import { email } from "https://esm.town/v/std/email?v=9";
export let sendPDF = (async () => {
const { jsPDF } = await import("npm:jspdf");
const doc = new jsPDF();
doc.text("Hello world!", 10, 10);
return email({
text: "here's a pdf",
attachments: [{
content: btoa(doc.output()),
filename: "test.pdf",
type: "application/pdf",
disposition: "attachment",
}],
});
})();
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
import { jsPDF } from "https://esm.sh/jspdf@2.5.1";
import { email } from "https://esm.town/v/std/email?v=9";
export let sendPDF = (async () => {
const doc = new jsPDF();
doc.text("Hello world!", 10, 10);
return email({
text: "here's a pdf",
attachments: [
{
content: btoa(doc.output()),
filename: "test.pdf",
type: "application/pdf",
disposition: "attachment",
},
],
});
})();
1
2
3
4
5
6
7
8
9
// View me at https://neverstew-helloWorldPDF.web.val.run
export const helloWorldPDF = async (req: Request) => {
const { jsPDF } = await import("npm:jspdf");
const doc = new jsPDF();
doc.text("Hello world!", 10, 10);
return new Response(doc.output(), {
headers: { "Content-Type": "application/pdf" },
});
};
1
2
3
4
5
6
7
8
9
// View me at https://neverstew-helloWorldPDF.web.val.run
export const helloWorldPDF = async (req: Request) => {
const { jsPDF } = await import("npm:jspdf");
const doc = new jsPDF();
doc.text("Hello world!", 10, 10);
return new Response(doc.output(), {
headers: { "Content-Type": "application/pdf" },
});
};

You can render PDFs on Val Town using the jspdf library (and presumably other libraries too!)

1
2
3
4
5
6
7
8
// View me at https://vtdocs-helloWorldPDF.express.val.run!
export const helloWorldPDF = async (req: express.Request, res: express.Response) => {
const { jsPDF } = await import("npm:jspdf");
const doc = new jsPDF();
doc.text("Hello world!", 10, 10);
res.set("Content-Type", "application/pdf");
res.send(doc.output());
};
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
export const generateInvoicePDF = async (options: {
invoiceNumber: string;
date: string;
customerName: string;
customerEmail: string;
items: {
description: string;
quantity: number;
price: number;
}[];
currencySymbol: string;
}): Promise<string> => {
const { jsPDF } = await import("npm:jspdf");
const doc = new jsPDF();
const {
invoiceNumber,
date,
customerName,
customerEmail,
items,
currencySymbol,
} = options;
// Set initial y position for content
let y = 20;
// Set invoice header
doc.setFontSize(18);
doc.text("Invoice", 105, y);
y += 10;
doc.setFontSize(12);
doc.text(`Invoice Number: ${invoiceNumber}`, 20, y);
doc.text(`Date: ${date}`, 150, y);
y += 10;
// Set customer information
doc.text(`Customer: ${customerName}`, 20, y);
doc.text(`Email: ${customerEmail}`, 150, y);
y += 10;
// Set table headers
doc.setFont(undefined, "bold");
doc.text("Description", 20, y);
doc.text("Quantity", 100, y);
doc.text("Price", 150, y);
y += 5;
// Draw table lines
doc.line(20, y, 180, y);
y += 5;
// Set table rows
doc.setFont(undefined, "normal");
items.forEach((item) => {
doc.text(item.description, 20, y);
doc.text(item.quantity.toString(), 100, y);
doc.text(item.price.toString(), 150, y);
y += 5;
});
// Draw table lines
doc.line(20, y, 180, y);
y += 10;
// Calculate total amount
const total = items.reduce(
(acc, item) => acc + item.quantity * item.price,
0,
);
// Set total amount
doc.setFont(undefined, "bold");
doc.text(`Total: ${total}`, 150, y);
return doc.output();
};
1
Next