Topics

Der Barrierefreiheitsdiagnosedienst von Liberogic stellte Zertifikate und Berichte im HTML-Format bereit, reagierte aber auf Anfragen nach Zertifikaten im PDF-Format.Zertifikate und Berichte im PDF-FormatSie können es jetzt ausstellen!

PDF-Webzugänglichkeitsprüfungszertifikat

PDF-Barrierefreiheitskonformitätsbericht (VPAT/ACR)

Um dieses Problem zu lösen, haben wir ein System entwickelt, das während des Build-Prozesses automatisch gleichzeitig mit der HTML-Ausgabe auch PDFs erzeugt.

🛠️ Infrastruktur zur PDF-Erstellung: Puppeteer und Umgebungsgestaltung

Es kann den Chromium-Browser im Headless-Modus als PDF-Generierungstool betreiben.PuppeteerDa HTML ursprünglich mit Astro erstellt wurde, verlief die Einführung von Puppeteer relativ reibungslos.

1. Absicherung einer Rendering-Umgebung mithilfe eines lokalen Servers

Puppeteer nutzt die Druckfunktionalität von Chromium, unterstützt aber keine lokalen HTML-Dateien (file://) direkt,Das Layout ist fehlerhaft.Es werden Probleme auftreten.

Um dies zu vermeiden, haben wir folgende Umgebung geschaffen:

• Temporärer Webserver:Nach dem AufbaudistEin temporärer lokaler Webserver zum Hosten des Verzeichnisses (http-server) als Kindprozess von Node.js.
• Stabile Umgebung:Puppeteer über Server (http://localhost:8080) um eine stabile Rendering-Umgebung zu gewährleisten, die mit der eines Browsers identisch ist.

Umgebungskonfiguration und Serverstartcode (Auszug)

// プロジェクト定数からドメインを取得し、未設定なら localhost:8080 を使用
const HOST_DOMAIN = SITE_URL || `http://localhost:${PORT}`; 
const BUILD_ROOT = path.join(__dirname, 'dist');
const PORT = 8080;

// --- サーバーの起動ロジック ---
let serverProcess = exec(`npx http-server ${BUILD_ROOT} -p ${PORT} -s --silent`);

// サーバーが起動するまで待機
await new Promise((resolve) => setTimeout(resolve, 2000));

// --- Puppeteerのページアクセス ---
// Puppeteerは localhost:8080 にアクセスし、レンダリングを開始します
const serverUrl = `http://localhost:${PORT}/${REPORT_DIR}/${urlPath}`;
await page.goto(serverUrl, { waitUntil: 'networkidle0' });

2. Japanische Schriftarten anwenden

Da die lokale Serverumgebung, auf der die PDF-Datei generiert wird, keine japanischen Schriftarten besitzt, sind die in der PDF-Datei eingebetteten Schriftarten fehlerhaft.

• Schriftart-Workaround:Im Skript werden die Webfont-Referenz und der angewendete Stil dynamisch in das DOM eingefügt, kurz bevor die PDF-Datei generiert wird. Dadurch ist es möglich, PDFs mit japanischen Schriftarten auszugeben. Da die HTML-Seite Geschwindigkeit priorisiert und keine Webfonts verwendet, wird diese dynamische Einfügung nur auf die PDF-Datei angewendet.

Code zum dynamischen Einfügen von Schriftarten (Auszug)

// Webフォントの動的挿入ロジック (page.evaluateでブラウザ側で実行)
await page.evaluate((fontUrl) => {
    // <link>タグを生成してDOMに挿入
    const link = document.createElement('link');
    link.rel = 'stylesheet';
    link.href = fontUrl;
    document.head.appendChild(link);
    
    // @media print スタイルを強制的に挿入し、フォントを適用
    const printStyle = document.createElement('style');
    printStyle.textContent = `
      @media print {
        html, body {
          font-family: 'Noto Sans JP', sans-serif !important;
        }
      }
    `;
    document.head.appendChild(printStyle);
}, WEBFONTS_URL);

🚨 Die größte Herausforderung: Probleme mit URL-Referenzen in PDF-Links

Das Schwierigste warVerknüpfung von PDFsDer im PDF eingebettete Link verweist weiterhin auf die URL der lokalen Entwicklungsumgebung (http://localhost:8080Dies geschieht, weil Chromium die Basis-URI beim Laden des HTML-Codes als Basis des PDF-Links beibehält.

Erzwinge absolute Pfade für Links

Um dieses Problem zu beheben, haben wir nach der Bereitstellung den Link mithilfe der folgenden Schritte in einen vollständigen absoluten Pfad umgeschrieben:

1. Verwenden Sie die Zieldomäne:Projektkonstanten (SITE_URL) auf die Domain, auf der Sie bereitstellen (z.B.https://example.comwird erhalten.
2. Konstruktion und Ersetzung absoluter URLs:HTML-Inhalte in Node.js abrufen und den ursprünglichen Link zurückgeben (/accessibility_report/top/)von,Erworbene DomäneDie vollständige URL, beginnend mit (z.B.https://example.com/accessibility_report/pdf/acr-top.pdf)
3. Erneut auf DOM anwenden:Wenden Sie das neu geschriebene HTML erneut auf Chromium an (page.setContent()) um Links in die PDF-Datei einzubetten.Die Domäne nach der geplanten Bereitstellungwar sicher befestigt an der

Link-Rewriting-Code (Auszug)

// 1. 無効化したいリンク（.link-ignore-pdf）を物理的に削除
const ignoreLinkRegex = new RegExp(`(<a\\\\s+[^>]*class=["'][^"']*${ignoreClass}[^"']*["'][^>]*>)(.*?)(<\\/a\\\\s*>)`, 'gi');
content = content.replace(ignoreLinkRegex, '$2'); // <a>タグ全体を中身のテキストに置換

// 2. 詳細ページへのリンクを絶対URLに書き換え
const detailLinkRegex = new RegExp(`href="${reportDirRootLink}([^/]+)\\/"`, 'g');
const detailPdfUrl = `${pdfAbsoluteUrl}/acr-top.pdf`; // 例

content = content.replace(detailLinkRegex, (match, slug) => {
    // リンクを <http://localhost>... ではなく、<https://example.com/>... に強制置換
    return `href="${pdfAbsoluteUrl}/acr-${slug}.pdf"`; 
});

// 3. 最終的なコンテンツをブラウザに再適用し、PDF出力へ
await page.setContent(content, { 
    waitUntil: 'domcontentloaded',
    baseURL: baseUrlForContent
});

🎉 Zusammenfassung

Dieses Mal gab es aufgrund der etwas ungewöhnlichen Anforderung, PDFs zu verlinken, einige Schwierigkeiten, aber die Einführung von Puppeteer selbst verlief recht reibungslos. Der Build-Prozess ist schnell, und ich empfand es als ein sehr nützliches Werkzeug!

Die wichtigsten Punkte dieser Antwort sind folgende:

• Das Rendern über einen lokalen Server gewährleistet Stabilität.
• Dynamische Webfont-Einbindung für japanische Sprachunterstützung
• Verknüpfungen zwischen PDFs durch Erstellung absoluter Pfade

Die Unterstützung von PDF hat den Komfort unseres Services deutlich verbessert. Wir werden uns auch weiterhin bemühen, unseren Kunden hochwertige Dienstleistungen im Bereich der Barrierefreiheitsprüfung anzubieten!