fix: pdf printing with puppeteer

This commit is contained in:
Julian Krauser 2024-12-21 10:18:07 +01:00
parent 4385b6dc34
commit 98477eafde
6 changed files with 1023 additions and 733 deletions

View file

@ -1,9 +1,19 @@
FROM node:18-alpine AS build
RUN apk add --no-cache \
chromium \
nss \
freetype \
harfbuzz \
ca-certificates \
ttf-freefont
WORKDIR /app
COPY package*.json ./
ENV PUPPETEER_EXECUTABLE_PATH=/usr/bin/chromium-browser
RUN npm install
COPY . /app
@ -12,8 +22,21 @@ RUN npm run build
FROM node:18-alpine AS prod
RUN apk add --no-cache \
chromium \
nss \
freetype \
harfbuzz \
ca-certificates \
ttf-freefont
WORKDIR /app
RUN mkdir -p /app/export
ENV PUPPETEER_EXECUTABLE_PATH=/usr/bin/chromium-browser
COPY --from=build /app/src/templates /app/src/templates
COPY --from=build /app/dist /app/dist
COPY --from=build /app/node_modules /app/node_modules
COPY --from=build /app/package.json /app/package.json

1641
package-lock.json generated

File diff suppressed because it is too large Load diff

View file

@ -27,6 +27,7 @@
"cors": "^2.8.5",
"dotenv": "^16.4.5",
"express": "^5.0.0-beta.3",
"handlebars": "^4.7.8",
"ics": "^3.8.1",
"jsonwebtoken": "^9.0.2",
"moment": "^2.30.1",
@ -34,7 +35,7 @@
"mysql": "^2.18.1",
"node-schedule": "^2.1.1",
"nodemailer": "^6.9.14",
"pdf-creator-node": "^2.3.5",
"puppeteer": "^23.11.1",
"qrcode": "^1.5.4",
"reflect-metadata": "^0.2.2",
"socket.io": "^4.7.5",

View file

@ -231,7 +231,10 @@ export async function createProtocolPrintoutById(req: Request, res: Response): P
year: "numeric",
})}`;
let filename = `P_${protocol.title.replace(/[^a-zA-Z0-9]/g, "")}_${iteration + 1}_${new Date().toLocaleDateString()}`;
let filename = `${new Date().toISOString().split("T")[0]}_${iteration + 1}_Protokoll_${protocol.title.replace(
/[^a-zA-Z0-9]/g,
""
)}`;
await PdfExport.renderFile({
template: "protocol.template.html",

View file

@ -1,21 +1,6 @@
import { readFileSync } from "fs";
import pdf, { Options } from "pdf-creator-node";
var options = (title: string = "pdf-export Mitgliederverwaltung"): Options => ({
format: "A4",
orientation: "portrait",
border: "10mm",
header: {
height: "10mm",
contents: `<h1 style="text-align: center;">${title}</h1>`,
},
footer: {
height: "5mm",
contents: {
default: '<span style="color: #444;">{{page}}</span>/<span>{{pages}}</span>',
},
},
});
import Handlebars from "handlebars";
import puppeteer from "puppeteer";
export abstract class PdfExport {
static getTemplate(template: string) {
@ -24,7 +9,7 @@ export abstract class PdfExport {
static async renderFile({
template,
title,
title = "pdf-export Mitgliederverwaltung",
filename,
data,
}: {
@ -33,12 +18,36 @@ export abstract class PdfExport {
filename: string;
data: any;
}) {
let document = {
html: this.getTemplate(template),
data,
path: process.cwd() + `/export/${filename}.pdf`,
};
const templateHtml = this.getTemplate(template);
const templateCompiled = Handlebars.compile(templateHtml);
const html = templateCompiled(data);
await pdf.create(document, options(title));
const browser = await puppeteer.launch({
headless: true,
args: ["--no-sandbox", "--disable-gpu", "--disable-setuid-sandbox"],
});
const page = await browser.newPage();
await page.setContent(html, { waitUntil: "domcontentloaded" });
await page.pdf({
path: process.cwd() + `/export/${filename}.pdf`, // Name der PDF-Datei
format: "A4",
printBackground: false,
margin: {
top: "15mm",
bottom: "15mm",
left: "10mm",
right: "10mm",
},
displayHeaderFooter: true,
headerTemplate: `<h1 style="font-size:10px; text-align:center; width:100%;">${title}</h1>`,
footerTemplate: `
<div style="font-size:10px; text-align:center; width:100%; color:#888;">
Seite <span class="pageNumber"></span> von <span class="totalPages"></span>
</div>
`,
});
await browser.close();
}
}

View file

@ -1,27 +0,0 @@
// types/pdf-creator-node.d.ts
declare module "pdf-creator-node" {
interface Document {
html: string;
data: any;
path: string;
type?: string;
}
interface Options {
format: string;
orientation: string;
border: string;
header?: {
height: string;
contents: string;
};
footer?: {
height: string;
contents: string | { [key: string]: string | number };
};
}
function create(document: Document, options: Options): Promise<any>;
export { create, Document, Options };
}