Legger til pdf-footer

Author: anders-nom

common/cms-documents/content.ts

@@ -38,8 +38,8 @@ type ContentMetaData = {
     contentType?: string;
     contentTypeKey?: string;
 
-    created?: string;
-    timestamp?: string;
+    created: string;
+    timestamp: string;
     publishFrom?: string;
     publishTo?: string;
 

common/timestamp.ts

@@ -0,0 +1,2 @@
+export const formatTimestamp = (tsRaw: string) =>
+    new Date(tsRaw).toLocaleString('no', { dateStyle: 'short', timeStyle: 'short' });

server/src/cms/CmsArchiveSite.ts

@@ -171,8 +171,8 @@ export class CmsArchiveSite {
                 .send(data);
         });
 
-        router.get('/pdf/multi/:versionKeys', async (req, res, next) => {
-            const result = await this.pdfGenerator.generatePdfFromVersions(
+        router.get('/pdf/multi/:versionKeys', async (req, res) => {
+            await this.pdfGenerator.pdfFromVersionsResponse(
                 req.params.versionKeys.split(','),
                 res,
                 parseNumberParam(req.query.width)

server/src/pdf/PdfGenerator.ts

@@ -1,7 +1,7 @@
 import { Browser } from 'puppeteer';
 import { CmsArchiveContentService } from '../cms/CmsArchiveContentService';
-import { pixelWidthToA4Scale } from './pdf-scale';
-import { CmsContentDocument } from '../../../common/cms-documents/content';
+import { generatePdfFilename, generatePdfFooter, pixelWidthToA4Scale } from './pdf-utils';
+import { CmsContent } from '../../../common/cms-documents/content';
 import archiver from 'archiver';
 import { Response } from 'express';
 import mime from 'mime';
@@ -28,7 +28,7 @@ export class PdfGenerator {
         this.contentService = contentService;
     }
 
-    public async generatePdfFromVersions(
+    public async pdfFromVersionsResponse(
         versionKeys: string[],
         res: Response,
         width: number = DEFAULT_WIDTH_PX
@@ -66,7 +66,7 @@ export class PdfGenerator {
                 continue;
             }
 
-            await this.generatePdf(content.html, width).then((pdf) => {
+            await this.generateContentPdf(content, width).then((pdf) => {
                 if (!pdf) {
                     return;
                 }
@@ -77,7 +77,7 @@ export class PdfGenerator {
                     res.setHeader('Content-Length', pdf.length * contentVersions.length);
                 }
 
-                const fileName = this.getPdfFilename(content);
+                const fileName = generatePdfFilename(content);
 
                 archive.append(pdf, { name: fileName });
             });
@@ -95,18 +95,23 @@ export class PdfGenerator {
             return null;
         }
 
-        const data = await this.generatePdf(content.html, width);
+        const data = await this.generateContentPdf(content, width);
         if (!data) {
             return null;
         }
 
         return {
             data,
-            filename: this.getPdfFilename(content),
+            filename: generatePdfFilename(content),
         };
     }
 
-    private async generatePdf(html: string, width: number): Promise<Buffer | null> {
+    private async generateContentPdf(content: CmsContent, width: number): Promise<Buffer | null> {
+        const { html } = content;
+        if (!html) {
+            return null;
+        }
+
         const widthActual = width >= MIN_WIDTH_PX ? width : DEFAULT_WIDTH_PX;
 
         // Ensures assets with relative urls are loaded from the correct origin
@@ -124,8 +129,16 @@ export class PdfGenerator {
 
             const pdf = await page.pdf({
                 printBackground: true,
-                format: 'a4',
+                format: 'A4',
                 scale: pixelWidthToA4Scale(widthActual),
+                displayHeaderFooter: true,
+                footerTemplate: generatePdfFooter(content),
+                margin: {
+                    top: '4px',
+                    right: '4px',
+                    bottom: '24px',
+                    left: '4px',
+                },
             });
 
             await page.close();
@@ -136,8 +149,4 @@ export class PdfGenerator {
             return null;
         }
     }
-
-    private getPdfFilename(content: CmsContentDocument) {
-        return `${content.meta.timestamp}_${content.name}_${content.contentKey}-${content.versionKey}.pdf`;
-    }
 }

server/src/pdf/pdf-scale.ts

@@ -0,0 +1,25 @@
+import { CmsContent, CmsContentDocument } from '../../../common/cms-documents/content';
+import { formatTimestamp } from '../../../common/timestamp';
+
+const PUPPETEER_PDF_DPI = 96;
+const A4_INCH_WIDTH = 8.27;
+const SCALE_FACTOR = PUPPETEER_PDF_DPI * A4_INCH_WIDTH;
+
+const MIN = 0.1;
+const MAX = 2;
+
+export const pixelWidthToA4Scale = (pxWidth: number): number =>
+    Math.max(MIN, Math.min(MAX, (1 / pxWidth) * SCALE_FACTOR));
+
+export const generatePdfFooter = (content: CmsContent) => `
+    <div style="font-size: 10px; margin-bottom:-16px; padding: 4px; width: 100%; display: flex; justify-content: space-between; flex-wrap: nowrap">
+        <div style="white-space: nowrap; overflow-x: hidden; text-overflow: ellipsis; flex-shrink: 1">
+            ${content.displayName}
+        </div>
+        <div style="white-space: nowrap; flex-shrink: 0">
+            [${formatTimestamp(content.meta.timestamp)} // version: ${content.versionKey}] - (<span class="pageNumber"></span>/<span class="totalPages"></span>)
+        </div>
+    </div>`;
+
+export const generatePdfFilename = (content: CmsContentDocument) =>
+    `${content.meta.timestamp}_${content.name}_${content.contentKey}-${content.versionKey}.pdf`;

server/src/pdf/pdf-utils.ts

@@ -4,6 +4,7 @@ import { Button, Checkbox, CheckboxGroup, Heading, HelpText, Label } from '@navi
 import { classNames } from '../../../../utils/classNames';
 import { useAppState } from '../../../../context/app-state/useAppState';
 import { ArrowDownRightIcon } from '@navikt/aksel-icons';
+import { formatTimestamp } from '../../../../../common/timestamp';
 
 import style from './HtmlExporter.module.css';
 
@@ -113,7 +114,7 @@ export const HtmlExporter = ({ content, hidden }: Props) => {
                 value={versionKeysSelected}
             >
                 {versions.map((version, index) => {
-                    const dateTime = new Date(version.timestamp).toLocaleString('no');
+                    const dateTime = formatTimestamp(version.timestamp);
                     return (
                         <Checkbox
                             onClick={onCheckboxClick(index)}

src/components/main-section/content-view/html-exporter/HtmlExporter.tsx

@@ -3,6 +3,7 @@ import { Select } from '@navikt/ds-react';
 import { CmsContent } from '../../../../../common/cms-documents/content';
 import { useApiFetch } from '../../../../fetch/useApiFetch';
 import { useAppState } from '../../../../context/app-state/useAppState';
+import { formatTimestamp } from '../../../../../common/timestamp';
 
 const TITLE_MAX_LENGTH = 100;
 
@@ -35,7 +36,7 @@ export const VersionSelector = ({ content }: Props) => {
             }}
         >
             {content.versions.map((version) => {
-                const dateTime = new Date(version.timestamp).toLocaleString('no');
+                const dateTime = formatTimestamp(version.timestamp);
                 return (
                     <option value={version.key} key={version.key}>
                         {`${pruneTitle(version.title)} - [${dateTime}]`}