import {PdfDocument, WaitForType, CssMediaType, FitToPaperModes, PdfPaperOrientation, PaperSizeUnit} from "@ironsoftware/ironpdf";
(async () => {
// Many rendering options to use to customize!
const options = {
paperSize: {
unit: PaperSizeUnit.Inch,
width: 12.5,
height: 20,
},
printHtmlBackgrounds: true,
paperOrientation: PdfPaperOrientation.Landscape,
title: "My PDF Document Name",
waitFor: {
type: WaitForType.RenderDelay,
maxWaitTime: 50, // in milliseconds
},
cssMediaType: CssMediaType.Screen,
fitToPaperMode: FitToPaperModes.FitToPage,
createPdfFormsFromHtml: true,
// Supports margin customization
margin: {
top: 40, // millimeters
left: 20, // millimeters
right: 20, // millimeters
bottom: 40, // millimeters
},
// Can set FirstPageNumber if you have a cover page
firstPageNumber: 1, // use 2 if a cover page will be appended
};
// Render HTML page to PDF
const pdf = await PdfDocument.fromUrl("https://angular.io/", { renderOptions: options });
// Save the PDF
await pdf.saveAs("my-content.pdf");
})();
HTML 渲染設定
從 HTML 字串、檔案或網頁 URL 渲染時,可以配置許多渲染選項。上述設定包括具有可配置測量單位的自定義紙張尺寸、啟用 HTML 背景、頁面方向、文檔標題、延遲渲染過程、指定 CSS 媒體類型、選擇紙張模式、創建可編輯的表單字段、自定義邊距以及添加頁碼。
CSS 媒體類型 "screen" 和 "print" 是用來指定樣式應如何根據顯示或輸出的媒介應用於 HTML 文檔的指令。當選擇 "screen" 作為媒體類型時,表示 CSS 規則是為螢幕顯示而設計的,優化顏色和佈局等因素以適應數字螢幕。相反,當選擇 "print" 時,則指示瀏覽器應用針對列印文檔的樣式,確保在將 HTML 內容列印到實體媒介上時具有可讀性和適當格式。有時候,需要將 CSS 媒體類型設為 "screen" 以顯示特定的背景圖像。