Topics

De toegankelijkheidsdiagnosedienst van Liberogic leverde certificaten en rapporten in HTML-formaat, maar in reactie op verzoeken om certificaten in PDF-formaat,Certificaten en rapporten in PDF-formaatU kunt het nu uitgeven!

PDF-certificaat voor webtoegankelijkheidsinspectie

PDF-toegankelijkheidsconformiteitsrapport (VPAT/ACR)

Om dit probleem aan te pakken, hebben we een systeem ontwikkeld dat tijdens het bouwproces automatisch PDF-bestanden en HTML-bestanden tegelijk uitvoert.

🛠️ PDF-creatie-infrastructuur: Poppenspeler en omgevingsconstructie

Het kan de Chromium-browser headless laten werken als een PDF-generatietool.PuppeteerOmdat HTML oorspronkelijk met Astro is gebouwd, verliep de introductie van Puppeteer relatief soepel.

1. Een renderingomgeving beveiligen met behulp van een lokale server

Puppeteer maakt gebruik van de afdrukfunctionaliteit van Chromium, maar ondersteunt geen lokale HTML-bestanden (file://) direct,De lay-out is kapotEr zullen problemen ontstaan.

Om dit te voorkomen, hebben we de volgende omgeving gecreëerd:

• Tijdelijke webserver:Na de bouwdistEen tijdelijke lokale webserver om de directory te hosten (http-server) als een onderliggend proces van Node.js.
• Stabiele omgeving:Poppenspeler via server (http://localhost:8080) om een ​​stabiele weergaveomgeving te garanderen die identiek is aan die van een browser.

Omgevingsinstelling en serveropstartcode (fragment)

// プロジェクト定数からドメインを取得し、未設定なら 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. Japanse lettertypen toepassen

Omdat de lokale serveromgeving waar het PDF-bestand wordt gegenereerd geen Japanse lettertypen heeft, zullen de in het PDF-bestand ingesloten lettertypen onjuist zijn.

• Oplossing voor lettertype:In het script worden de webfontreferentie en de toegepaste stijl dynamisch ingevoegd in de DOM vlak voordat de PDF wordt gegenereerd. Dit maakt het mogelijk om PDF's uit te voeren met Japanse lettertypen. Omdat de HTML-kant prioriteit geeft aan snelheid en geen webfonts gebruikt, wordt deze dynamische invoeging alleen toegepast op de PDF.

Dynamische lettertype-invoegcode (fragment)

// 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);

🚨 Grootste probleem: URL-referentieproblemen in PDF-links

Het moeilijkste wasKoppelen tussen PDF'sDe link in de PDF verwijst nog steeds naar de URL van de lokale ontwikkelomgeving (http://localhost:8080Dit komt doordat Chromium de basis-URI behoudt bij het laden van de HTML als basis van de PDF-koppeling.

Absolute paden voor links afdwingen

Om dit probleem op te lossen, hebben we de koppelingen na de implementatie herschreven naar volledige absolute paden. Hiervoor hebben we de volgende stappen uitgevoerd:

1. Gebruik het doeldomein:Projectconstanten (SITE_URL) naar het domein waarnaar u implementeert (bijv.https://example.com) wordt verkregen.
2. Absolute URL-constructie en -vervanging:Haal HTML-inhoud op in Node.js en retourneer de originele link (/accessibility_report/top/)van,Verworven domeinDe volledige URL beginnend bij (bijv.https://example.com/accessibility_report/pdf/acr-top.pdf)
3. Opnieuw toepassen op DOM:Pas de herschreven HTML opnieuw toe op Chromium (page.setContent()) om links in de PDF in te sluiten.Het domein na beoogde implementatiewas stevig vastgemaakt aan de

Link herschrijfcode (fragment)

// 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
});

🎉 Samenvatting

Deze keer hadden we wat problemen vanwege de ietwat ongebruikelijke vereiste om PDF's te koppelen, maar de introductie van Puppeteer zelf verliep redelijk soepel. De opbouw is snel en ik vond het een erg handige tool!

De belangrijkste punten uit dit antwoord zijn als volgt:

• Renderen via een lokale server zorgt voor stabiliteit
• Dynamische webfontinjectie voor ondersteuning van de Japanse taal
• Koppelingen tussen PDF's door koppelingen tot absolute paden te maken

De ondersteuning van PDF heeft het gebruiksgemak van onze service aanzienlijk verbeterd. We blijven ernaar streven om hoogwaardige toegankelijkheidsbeoordelingsdiensten te leveren die waardevol zijn voor onze klanten!