INTEGRITY Dokumentace

← Browser Run / browser-run / quick-actions

/pdf - Vykreslení PDF

/pdf endpoint dá prohlížeči pokyn, aby vygeneroval PDF webové stránky nebo vlastního HTML pomocí headless služby Cloudflare Browser Run.

Tento koncový bod můžete použít dvěma způsoby:

Další informace najdete v tématu Quick Actions: Než začnete.

Endpoint

https://api.cloudflare.com/client/v4/accounts/<accountId>/browser-rendering/pdf

Povinná pole

Musíte zadat buď url nebo html:

Běžné případy použití

Základní použití

Převeďte adresu URL do PDF

Přejděte na https://example.com/ a vložit vlastní CSS a externí šablonu stylů. Poté vrátit vykreslenou stránku jako PDF.

curl -X POST 'https://api.cloudflare.com/client/v4/accounts/<accountId>/browser-rendering/pdf' \
  -H 'Authorization: Bearer <apiToken>' \
  -H 'Content-Type: application/json' \
  -d '{
    "url": "https://example.com/",
    "addStyleTag": [
      { "content": "body { font-family: Arial; }" }
    ]
  }' \
  --output "output.pdf"
import Cloudflare from "cloudflare";

const client = new Cloudflare({
	apiToken: process.env["CLOUDFLARE_API_TOKEN"],
});

const pdf = await client.browserRendering.pdf.create({
	account_id: process.env["CLOUDFLARE_ACCOUNT_ID"],
	url: "https://example.com/",
	addStyleTag: [{ content: "body { font-family: Arial; }" }],
});

console.log(pdf);

const content = await pdf.blob();
console.log(content);
interface Env {
	BROWSER: BrowserRun;
}

export default {
	async fetch(request, env): Promise<Response> {
		return await env.BROWSER.quickAction("pdf", {
			url: "https://example.com/",
			addStyleTag: [{ content: "body { font-family: Arial; }" }],
		});
	},
} satisfies ExportedHandler<Env>;

Převeďte vlastní HTML do PDF

Pokud máte surový kód HTML, ze kterého chcete vygenerovat PDF, použijte html Vlastní styly však lze přesto použít pomocí addStyleTag .

curl -X POST https://api.cloudflare.com/client/v4/accounts/<accountId>/browser-rendering/pdf \
  -H 'Authorization: Bearer <apiToken>' \
  -H 'Content-Type: application/json' \
  -d '{
  "html": "<html><body>Advanced Snapshot</body></html>",
	"addStyleTag": [
      { "content": "body { font-family: Arial; }" },
      { "url": "https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" }
    ]
}' \
  --output "invoice.pdf"

Pokročilé použití

Pokročilé načtení stránky s vlastními hlavičkami a viewportem

Přejděte na https://example.com, nastavení dalších HTTP hlaviček a konfiguraci velikosti stránky (viewport). Generování PDF počká, dokud nebudou po dobu alespoň 500 ms aktivní nejvýše dvě síťová připojení, nebo dokud nebude dosaženo maximálního časového limitu 4500 ms, a teprve poté proběhne vykreslení.

goToOptions parametr zpřístupňuje většinu Puppeteer API ↗.

curl -X POST 'https://api.cloudflare.com/client/v4/accounts/<accountId>/browser-rendering/pdf' \
  -H 'Authorization: Bearer <apiToken>' \
  -H 'Content-Type: application/json' \
  -d '{
    "url": "https://example.com/",
    "setExtraHTTPHeaders": {
      "X-Custom-Header": "value"
    },
    "viewport": {
      "width": 1200,
      "height": 800
    },
    "gotoOptions": {
      "waitUntil": "networkidle2",
      "timeout": 45000
    }
  }' \
  --output "advanced-output.pdf"

Blokování obrázků a stylů při generování PDF

Možnosti rejectResourceTypes a rejectRequestPattern lze použít k blokování požadavků během vykreslování. Lze provést i opak, pouze povolit určité požadavky pomocí allowResourceTypes a allowRequestPattern.

curl -X POST https://api.cloudflare.com/client/v4/accounts/<accountId>/browser-rendering/pdf \
  -H 'Authorization: Bearer <apiToken>' \
  -H 'Content-Type: application/json' \
  -d '{
  "url": "https://cloudflare.com/",
  "rejectResourceTypes": ["image"],
  "rejectRequestPattern": ["/^.*\\.(css)"]
}' \
  --output "cloudflare.pdf"

Přizpůsobte záhlaví a zápatí stránky

Záhlaví a zápatí stránky můžete přizpůsobit pomocí šablon HTML s využitím headerTemplate a footerTemplate možnosti. Povolte displayHeaderFooter k jejich zahrnutí do výstupu. Tento příklad vygeneruje PDF ve formátu A5 se značkovou hlavičkou, zprávou v zápatí a číslováním stránek.

curl -X POST 'https://api.cloudflare.com/client/v4/accounts/<accountId>/browser-rendering/pdf' \
  -H 'Authorization: Bearer <apiToken>' \
  -H 'Content-Type: application/json' \
  -d '{
    "url": "https://example.com",
    "pdfOptions": {
      "format": "a5",
      "headerTemplate": "<div style=\"font-size: 10px; text-align: center; width: 100%; padding: 5px;\"><span>brand name</span></div>",
      "displayHeaderFooter": true,
      "footerTemplate": "<div style=\"color: lightgray; border-top: solid lightgray 1px; font-size: 10px; padding-top: 5px; text-align: center; width: 100%;\"><span>This is a test message</span> - <span class=\"pageNumber\"></span></div>",
      "margin": {
        "top": "70px",
        "bottom": "70px"
      }
    }
  }' \
  --output "header-footer.pdf"

Zahrnout dynamické zástupné symboly z metadat stránky

Můžete zahrnout dynamické zástupné symboly, například title, date, pageNumber, a totalPages v záhlaví nebo zápatí k zobrazení metadat na každé stránce. Tento příklad vytvoří PDF ve formátu A4 se záhlavím v barvách společnosti, aktuálním datem a názvem a číslováním stránek v zápatí.

curl -X POST 'https://api.cloudflare.com/client/v4/accounts/<accountId>/browser-rendering/pdf' \
  -H 'Authorization: Bearer <apiToken>' \
  -H 'Content-Type: application/json' \
  -d '{
    "url": "https://news.ycombinator.com",
    "pdfOptions": {
      "format": "a4",
      "landscape": false,
      "printBackground": true,
      "preferCSSPageSize": true,
      "displayHeaderFooter": true,
      "scale": 1.0,
      "headerTemplate": "<div style=\"width: 100%; font-size: 10px; padding: 10px; text-align: center;\"><div style=\"border-bottom: 1px solid #ddd;\"><span style=\"color: #666;\">Company Name</span> | <span class=\"date\"></span> | <span class=\"title\"></span></div></div>",
      "footerTemplate": "<div style=\"width: 100%; font-size: 10px; padding: 10px; text-align: center;\"><div style=\"border-top: 1px solid #ddd;\">Page <span class=\"pageNumber\"></span> of <span class=\"totalPages\"></span></div></div>",
      "margin": {
        "top": "100px",
        "bottom": "80px",
        "right": "30px",
        "left": "30px"
      },
      "timeout": 30000
    }
  }' \
  --output "dynamic-header-footer.pdf"

Použití vlastních písem

Pokud váš PDF vyžaduje písmo, které není předinstalované v prostředí Browser Run, můžete vlastní písma načíst pomocí addStyleTag parametr. Pokyny a příklady najdete v Použití vlastního písma.

Práce se stránkami náročnými na JavaScript

U stránek s velkým množstvím JavaScriptu nebo jednostránkových aplikací (SPA) může výchozí chování při načítání stránky vracet prázdné nebo neúplné výsledky. Je to dáno tím, že prohlížeč považuje stránku za načtenou dříve, než JavaScript dokončí vykreslení obsahu.

Nejjednodušším řešením je použít gotoOptions.waitUntil parametr nastavený na networkidle0 nebo networkidle2:

{
	"url": "https://example.com",
	"gotoOptions": {
		"waitUntil": "networkidle0"
	}
}

Pro rychlejší odezvu mohou pokročilí uživatelé použít waitForSelector k čekání na konkrétní prvek namísto čekání na zastavení veškeré síťové aktivity. To vyžaduje znalost, který CSS selektor signalizuje, že se požadovaný obsah načetl. Další podrobnosti najdete v Časové limity Quick Actions.

Nastavení vlastního user-agenta

User agent můžete změnit na úrovni stránky předáním userAgent jako parametr nejvyšší úrovně v těle JSON. To je užitečné, pokud cílový web zobrazuje různý obsah podle uživatelského agenta.

Řešení potíží

Pokud máte dotazy nebo narazíte na chybu, podívejte se na Časté dotazy a průvodce řešením problémů Browser Run.