HTML to PDF Node.js

Node.js için IronPDF Kütüphanesini Yükleyin

Seçtiğiniz Node projesinde aşağıda verilen NPM komutunu çalıştırarak IronPDF Node.js paketini yükleyin:

npm install @ironsoftware/ironpdf

npm install @ironsoftware/ironpdf

IronPDF paketini manuel olarak da indirebilir ve yükleyebilirsiniz.

IronPDF Motorunu Manuel Yükleyin (isteğe bağlı)

Node.js için IronPDF şu anda düzgün çalışmak için bir IronPDF Motoru ikili dosyası gerektirmektedir.

IronPDF Motoru ikili dosyasını işletim sisteminize uygun paketi yükleyerek yükleyin:

Lisans Anahtarı Uygula (isteğe bağlı)

Ön tanımlı olarak, IronPDF oluşturduğu veya değiştirdiği tüm belgeleri başlıklı bir arka plan filigranı ile damgalar.

Filigran olmadan PDF belgeleri oluşturmak için ironpdf.com/nodejs/licensing/ adresinden bir lisans anahtarı alın.

IronPDF'i eklenen filigran markalaması olmadan kullanmak için, küresel IronPdfGlobalConfig nesnesinde geçerli bir lisans anahtarı ile licenseKey özelliğini ayarlamanız gerekir. Bunun gerçekleşmesini sağlamak için kaynak kodu aşağıda verilmiştir:

import { IronPdfGlobalConfig } from "@ironsoftware/ironpdf";

// Get the global config object
var config = IronPdfGlobalConfig.getConfig();

// Set the license key for IronPDF
config.licenseKey = "{YOUR-LICENSE-KEY-HERE}";

import { IronPdfGlobalConfig } from "@ironsoftware/ironpdf";

// Get the global config object
var config = IronPdfGlobalConfig.getConfig();

// Set the license key for IronPDF
config.licenseKey = "{YOUR-LICENSE-KEY-HERE}";

Lisanslama sayfamızdan bir lisans anahtarı satın alın veya bize ücretsiz deneme lisans anahtarı edinmek için ulaşın.

Bu eğitici bölümünün devamı, bir lisans anahtarına sahip olduğumuzu ve bunun config.js adlı ayrı bir JavaScript dosyasında ayarlandığını varsayacaktır. IronPDF işlevselliğinden yararlanacağımız her yerde bu betiği içe aktarıyoruz:

import { PdfDocument } from "@ironsoftware/ironpdf";
import './config.js'; // Import the configuration script
// ...

import { PdfDocument } from "@ironsoftware/ironpdf";
import './config.js'; // Import the configuration script
// ...

HTML Dizesinden PDF Dosyası Oluştur

PdfDocument.fromHtml, ham web sayfası işaretleme kodu dizelerinden PDF oluşturmanıza olanak tanıyan bir yöntemdir.

Bu yöntem, üç yaklaşım arasında en fazla esnekliği sunar. Bunun nedeni, HTML dizgisindeki verilerin neredeyse herhangi bir kaynaktan alınabilmesidir: metin dosyaları, veri akışları, bir HTML şablonu, oluşturulmuş HTML verileri vb.

Aşağıdaki kod örneği, pratikte PdfDocument.fromHtml yönteminin nasıl kullanılacağını göstermektedir:

import { PdfDocument } from "@ironsoftware/ironpdf";
import './config.js'; // Import the configuration script

// Create a PDF from the HTML String "Hello world!"
const pdf = await PdfDocument.fromHtml("<h1>Hello from IronPDF!</h1>");

// Save the PDF document to the file system.
await pdf.saveAs("html-string-to-pdf.pdf");

import { PdfDocument } from "@ironsoftware/ironpdf";
import './config.js'; // Import the configuration script

// Create a PDF from the HTML String "Hello world!"
const pdf = await PdfDocument.fromHtml("<h1>Hello from IronPDF!</h1>");

// Save the PDF document to the file system.
await pdf.saveAs("html-string-to-pdf.pdf");

Yukarıda gösterildiği gibi, birinci seviye başlık öğesi için işaretleme kodunu içeren bir metin dizisiyle PdfDocument.fromHtml metodunu çağırıyoruz.

PdfDocument.fromHtml, bir PdfDocument sınıfının örneğine çözümlenen bir Promise döndürür. PdfDocument, kütüphanenin bazı kaynak içeriklerden ürettiği bir PDF dosyasını temsil eder. Bu sınıf, IronPDF'in çoğu çekirdek özelliğinin köşe taşını oluşturur ve önemli PDF oluşturma ve düzenleme kullanım durumlarını yönetir.

Son olarak, dosyayı diske kaydetmek için PdfDocument üzerinde saveAs yöntemini kullanıyoruz. Kaydedilen PDF dosyası aşağıda gösterilmiştir.

The PDF generated from the HTML string "<h1>Hello from IronPDF!</h1>". PdfDocument.fromHtml tarafından oluşturulan PDF dosyaları, web sayfası içeriği gibi görünür.

Bir HTML dosyasından bir PDF dosyası oluşturun

PdfDocument.fromHtml sadece HTML dizeleriyle çalışmaz. Yöntem ayrıca yerel bir HTML belgesi için bir yolu da kabul eder.

Bir sonraki örneğimizde bu örnek web sayfası ile çalışacağız.

HTML örnek sayfamız Google Chrome'da göründüğü şekliyle. Bu sayfayı ve benzerlerini Dosya Örnekleri web sitesinden indirin: https://filesamples.com/samples/code/html/sample2.html

Aşağıdaki kod satırları, tüm örnek belgeleri bir PDF'ye dönüştürür. Örnek dosyamıza giden geçerli bir dosya yolu ile PdfDocument.fromHtml çağırarak HTML dizesini değiştirdik:

import { PdfDocument } from "@ironsoftware/ironpdf";
import './config.js'; // Import the configuration script

// Render a PDF from an HTML File
const pdf = await PdfDocument.fromHtml("./sample2.html");

// Save the PDF document to the same folder as our project.
await pdf.saveAs("html-file-to-pdf-1.pdf");

import { PdfDocument } from "@ironsoftware/ironpdf";
import './config.js'; // Import the configuration script

// Render a PDF from an HTML File
const pdf = await PdfDocument.fromHtml("./sample2.html");

// Save the PDF document to the same folder as our project.
await pdf.saveAs("html-file-to-pdf-1.pdf");

Ortaya çıkan PDF'in içeriğini aşağıda ekledik. IronPDF'in sadece orijinal HTML belgesinin görünümünü korumadığını, aynı zamanda bağlantılar, formlar ve diğer yaygın etkileşimli öğelerin işlevselliğini de sürdürdüğünü fark edin.

Bu PDF, önceki kod örneğinden oluşturulmuştur. Görünümünü önceki görüntüyle karşılaştırın ve dikkat çekici benzerliği not edin!

Örnek sayfanın kaynak kodunu incelediyseniz, daha karmaşık olduğunu fark edeceksiniz. Daha fazla türde HTML öğesi kullanır (paragraflar, sırasız listeler, satır sonu, yatay çizgiler, köprüler, resimler vb.) ve ayrıca bir miktar script içerir (çerezleri ayarlamak için kullanılır).

IronPDF, şimdiye kadar kullandığımızdan çok daha karmaşık web içeriğini işleyebilir. Bunu göstermek için, aşağıdaki sayfayı ele alalım:

Bazıları tarafından, Chrome'u başsız bir tarayıcı örneği kullanarak programlı olarak kontrol etme yeteneğiyle popüler hale gelen Puppeteer isimli Node Kütüphanesi hakkında yazılmış bir makale

Yukarıda tasvir edilen sayfa, Puppeteer Node Kütüphanesi hakkında yazılmış bir makaledir. Puppeteer, Node geliştiricilerinin sunucu tarafında veya istemci tarafında (bir tanesi sunucu tarafı HTML PDF Oluşturma dahil) birçok tarayıcı görevini otomatikleştirmek için kullandığı başsız tarayıcı oturumlarını çalıştırır.

Yeni sayfa birçok varlık (CSS dosyaları, resimler, script dosyaları vb.) kaynağını kullanır ve daha karmaşık bir yerleşim kullanır. Bu sonraki örnek için, bu sayfanın kaydedilmiş bir kopyasını (kaynak varlıklarıyla birlikte) pikselle mükemmel bir PDF'ye dönüştüreceğiz.

Aşağıdaki kod parçacığı, sayfanın 'sample4.html' olarak projemizle aynı dizinde kaydedildiğini varsayar:

import { PdfDocument } from "@ironsoftware/ironpdf";
import './config.js'; // Import the configuration script

// Render a PDF from even more complex HTML code.
PdfDocument.fromHtml("./sample4.html").then(async (pdf) => {
    return await pdf.saveAs("html-file-to-pdf-2.pdf");
});

import { PdfDocument } from "@ironsoftware/ironpdf";
import './config.js'; // Import the configuration script

// Render a PDF from even more complex HTML code.
PdfDocument.fromHtml("./sample4.html").then(async (pdf) => {
    return await pdf.saveAs("html-file-to-pdf-2.pdf");
});

Aşağıdaki görüntü yukarıdaki kod parçacığının sonuçlarını gösterir.

Google Chrome'da iyi görünüyorsa, PDF'ye dönüştürüldüğünde de iyi görünecektir. Bu, CSS ve JavaScript ağırlıklı sayfa tasarımlarını içerir.

Bir URL'den PDF dosyası oluşturun

IronPDF herhangi bir boyutta ve karmaşıklıkta HTML dizgilerini ve HTML dosyalarını dönüştürebilir. Ancak, sadece dizgi ve dosyalardan gelen işaretlemeleri kullanmakla sınırlı değilsiniz. IronPDF bir URL'den HTML talep edebilir.

https://en.wikipedia.org/wiki/PDF adresindeki Wikipedia makalesini düşünün.

PDF formatı hakkında Wikipedia makalesi, standartlara uyumlu bir web tarayıcısında nasıl göründüğü şeklinde.

Bu Wikipedia makalesini PDF'ye dönüştürmek için bu kaynak kodunu kullanın:

import { PdfDocument } from "@ironsoftware/ironpdf";
import './config.js'; // Import the configuration script

// Convert the Web Page to a pixel-perfect PDF file.
const pdf = await PdfDocument.fromUrl("https://en.wikipedia.org/wiki/PDF");

// Save the document.
await pdf.saveAs("url-to-pdf.pdf");

import { PdfDocument } from "@ironsoftware/ironpdf";
import './config.js'; // Import the configuration script

// Convert the Web Page to a pixel-perfect PDF file.
const pdf = await PdfDocument.fromUrl("https://en.wikipedia.org/wiki/PDF");

// Save the document.
await pdf.saveAs("url-to-pdf.pdf");

Yukarıda, sadece birkaç satır kodla web sayfasını PDF'ye dönüştürmek için PdfDocument.fromUrl kullanıyoruz. IronPDF, sizin için web adresinin HTML kodunu alır ve sorunsuz bir şekilde işler. HTML dosyalarına veya metin dizilerine gerek yok!

 Wikipedia makalesinde PdfDocument.fromUrl çağırılarak oluşturulan PDF. Orijinal web sayfasıyla benzerliklerini unutmayın.

Bir Zip Arşivinden PDF Dosyası Oluşturun

Bir sıkıştırılmış (zip) dosyada bulunan belirli bir HTML dosyasını PDF'ye dönüştürmek için PdfDocument.fromZip kullanın.

Örneğin, proje dizininde aşağıdaki iç yapıya sahip bir Zip dosyamız olduğunu varsayalım:

html-zip.zip
├─ index.html
├─ style.css
├─ logo.png

index.html dosyası kodu içerir:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Hello world!</title>
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
    <h1>Hello from IronPDF!</h1>
    <a href="https://ironpdf.com/nodejs/">
      <img src="logo.png" alt="IronPDF for Node.js">
    </a>
  </body>
</html>

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Hello world!</title>
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
    <h1>Hello from IronPDF!</h1>
    <a href="https://ironpdf.com/nodejs/">
      <img src="logo.png" alt="IronPDF for Node.js">
    </a>
  </body>
</html>

style.css, beş CSS kuralı tanımlar:

@font-face {
  font-family: 'Gotham-Black';
  src: url('gotham-black-webfont.eot?') format('embedded-opentype'), 
       url('gotham-black-webfont.woff2') format('woff2'), 
       url('gotham-black-webfont.woff') format('woff'), 
       url('gotham-black-webfont.ttf') format('truetype'), 
       url('gotham-black-webfont.svg') format('svg');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin-left: auto;
  margin-right: auto;
  margin-top: 200px;
  margin-bottom: auto;
  color: white;
  background-color: black;
  text-align: center;
  font-family: "Helvetica"
}

h1 {
  font-family: "Gotham-Black";
  margin-bottom: 70px;
  font-size: 32pt;
}

img {
  width: 400px;
  height: auto;
}

p {
  text-decoration: underline;
  font-size: smaller;
}

Son olarak, logo.png ürün logomuzu tasvir eder:

Varsayımsal bir HTML zip dosyasının içindeki örnek görüntü.

fromZip yöntemini çağırırken, ilk argümanda zip'e giden geçerli bir yol belirtin ve zipten dönüştürmek istediğimiz HTML dosyasının adını mainHtmlFile özelliği ile ayarlayan bir JSON nesnesi ile birlikte.

Zip klasörü içindeki index.html dosyasını bu şekilde dönüştürürüz:

import { PdfDocument } from "@ironsoftware/ironpdf";
import './config.js'; // Import the configuration script

// Render the HTML from a zip archive
PdfDocument.fromZip("./html-zip.zip", {
  mainHtmlFile: "index.html"
}).then(async (pdf) => {
  return await pdf.saveAs("html-zip-to-pdf.pdf");
});

import { PdfDocument } from "@ironsoftware/ironpdf";
import './config.js'; // Import the configuration script

// Render the HTML from a zip archive
PdfDocument.fromZip("./html-zip.zip", {
  mainHtmlFile: "index.html"
}).then(async (pdf) => {
  return await pdf.saveAs("html-zip-to-pdf.pdf");
});

 PdfDocument.fromZip fonksiyonu kullanılarak PDF Oluşturma. Bu fonksiyon, ZIP dosyasında bulunan HTML kodunu ve içinde bulunan varlıkları başarıyla işler.

PDF Oluşturma Çıktısını Özelleştirin

import { PdfDocument, defaultChromePdfRenderOptions, AffixFonts } from "@ironsoftware/ironpdf";
import './config.js'; // Import the configuration script

// Initialize render options with default settings
var options = defaultChromePdfRenderOptions();

// Build a Custom Text-Based Header
options.textHeader = {
  centerText: "https://www.adobe.com",
  dividerLine: true,
  font: AffixFonts.CourierNew,
  fontSize: 12,
  leftText: "URL to PDF"
};

// Build a custom Text-Based Footer
options.textFooter = {
  centerText: "IronPDF for Node.js",
  dividerLine: true,
  fontSize: 14,
  font: AffixFonts.Helvetica,
  rightText: "HTML to PDF in Node.js"
};

// Render a PDF from a URL
PdfDocument.fromUrl("https://www.google.com/", { renderOptions: options }).then(async (pdf) => {
  return await pdf.saveAs("add-custom-headers-footers-1.pdf");
});

import { PdfDocument, defaultChromePdfRenderOptions, AffixFonts } from "@ironsoftware/ironpdf";
import './config.js'; // Import the configuration script

// Initialize render options with default settings
var options = defaultChromePdfRenderOptions();

// Build a Custom Text-Based Header
options.textHeader = {
  centerText: "https://www.adobe.com",
  dividerLine: true,
  font: AffixFonts.CourierNew,
  fontSize: 12,
  leftText: "URL to PDF"
};

// Build a custom Text-Based Footer
options.textFooter = {
  centerText: "IronPDF for Node.js",
  dividerLine: true,
  fontSize: 14,
  font: AffixFonts.Helvetica,
  rightText: "HTML to PDF in Node.js"
};

// Render a PDF from a URL
PdfDocument.fromUrl("https://www.google.com/", { renderOptions: options }).then(async (pdf) => {
  return await pdf.saveAs("add-custom-headers-footers-1.pdf");
});

import { PdfDocument, defaultChromePdfRenderOptions } from "@ironsoftware/ironpdf";
import './config.js'; // Import the configuration script

// Initialize render options with default settings
var options = defaultChromePdfRenderOptions();

// Define a rich HTML header
options.htmlHeader = {
  htmlFragment: "<strong>https://www.google.com/</strong>",
  dividerLine: true,
  dividerLineColor: "blue",
  loadStylesAndCSSFromMainHtmlDocument: true,
};

// Define a rich HTML footer
options.htmlFooter = {
  htmlFragment: "<img src='logo.png' alt='IronPDF for Node.js' style='display: block; width: 150px; height: auto; margin-left: auto; margin-right: auto;'>",
  dividerLine: true,
  loadStylesAndCSSFromMainHtmlDocument: true
};

// Render a PDF from a URL
await PdfDocument.fromUrl("https://www.google.com/", { renderOptions: options }).then(async (pdf) => {
  return await pdf.saveAs("add-html-headers-footers.pdf");
});

import { PdfDocument, defaultChromePdfRenderOptions } from "@ironsoftware/ironpdf";
import './config.js'; // Import the configuration script

// Initialize render options with default settings
var options = defaultChromePdfRenderOptions();

// Define a rich HTML header
options.htmlHeader = {
  htmlFragment: "<strong>https://www.google.com/</strong>",
  dividerLine: true,
  dividerLineColor: "blue",
  loadStylesAndCSSFromMainHtmlDocument: true,
};

// Define a rich HTML footer
options.htmlFooter = {
  htmlFragment: "<img src='logo.png' alt='IronPDF for Node.js' style='display: block; width: 150px; height: auto; margin-left: auto; margin-right: auto;'>",
  dividerLine: true,
  loadStylesAndCSSFromMainHtmlDocument: true
};

// Render a PDF from a URL
await PdfDocument.fromUrl("https://www.google.com/", { renderOptions: options }).then(async (pdf) => {
  return await pdf.saveAs("add-html-headers-footers.pdf");
});

import { PdfDocument, defaultChromePdfRenderOptions, PaperSize, FitToPaperModes, PdfPaperOrientation } from "@ironsoftware/ironpdf";
import './config.js'; // Import the configuration script

// Initialize render options with default settings
var options = defaultChromePdfRenderOptions();

// Set top, left, right, and bottom page margins in millimeters. 
options.margin = {
  top: 50,
  bottom: 50,
  left: 60,
  right: 60
};
options.paperSize = PaperSize.A5;
options.fitToPaperMode = FitToPaperModes.FitToPage;
options.paperOrientation = PdfPaperOrientation.Landscape;
options.grayScale = true;

// Create a PDF from the Google.com Home Page
PdfDocument.fromUrl("https://www.google.com/", { renderOptions: options }).then(async (pdf) => {
  return await pdf.saveAs("set-margins-and-page-size.pdf");
});

import { PdfDocument, defaultChromePdfRenderOptions, PaperSize, FitToPaperModes, PdfPaperOrientation } from "@ironsoftware/ironpdf";
import './config.js'; // Import the configuration script

// Initialize render options with default settings
var options = defaultChromePdfRenderOptions();

// Set top, left, right, and bottom page margins in millimeters. 
options.margin = {
  top: 50,
  bottom: 50,
  left: 60,
  right: 60
};
options.paperSize = PaperSize.A5;
options.fitToPaperMode = FitToPaperModes.FitToPage;
options.paperOrientation = PdfPaperOrientation.Landscape;
options.grayScale = true;

// Create a PDF from the Google.com Home Page
PdfDocument.fromUrl("https://www.google.com/", { renderOptions: options }).then(async (pdf) => {
  return await pdf.saveAs("set-margins-and-page-size.pdf");
});

Dinamik Web Sayfalarından PDF Oluşturma

Kullanılabilir olmayan ve sayfa yüklendiğinde gösterilen içerik içeren web sayfaları için, belki de belirli koşullar sağlanana kadar o sayfanın içeriğinin işlenmesini duraklamak gerekebilir.

Örneğin, geliştirici sayfa yüklendikten 15 saniye sonra görünen içerik içeren bir PDF oluşturmak isteyebilir. Başka bir durumda, aynı içerik yalnızca bazı karmaşık istemci tarafı kodları çalıştığında ortaya çıkabilir.

Her iki köşe durumunu (ve daha birçoklarını) ele almak için, IronPDF'in Node sürümü WaitFor mekanizmasını tanımlar. Geliştiriciler, IronPDF'in Chrome Rendering motoruna belirli olaylar meydana geldiğinde bir sayfanın içeriğini dönüştürmesi talimatını vermek için bu özelliği ChromePdfRenderOptions ayarlarına dahil edebilirler.

Aşağıdaki kod bloğu, ana sayfamızın içeriğini PDF olarak yakalamadan önce IronPDF'in 20 saniye beklemesini ayarlar:

import { PdfDocument, defaultChromePdfRenderOptions, WaitForType } from "@ironsoftware/ironpdf";
import './config.js'; // Import the configuration script

// Configure the Chrome Renderer to wait until 20 seconds has passed
// before rendering the web page as a PDF.
var options = defaultChromePdfRenderOptions();
options.waitFor = {
  type: WaitForType.RenderDelay,
  delay: 20000
}
PdfDocument.fromUrl("https://ironpdf.com/nodejs/", { renderOptions: options }).then(async (pdf) => {
  return await pdf.saveAs("waitfor-renderdelay.pdf");
});

import { PdfDocument, defaultChromePdfRenderOptions, WaitForType } from "@ironsoftware/ironpdf";
import './config.js'; // Import the configuration script

// Configure the Chrome Renderer to wait until 20 seconds has passed
// before rendering the web page as a PDF.
var options = defaultChromePdfRenderOptions();
options.waitFor = {
  type: WaitForType.RenderDelay,
  delay: 20000
}
PdfDocument.fromUrl("https://ironpdf.com/nodejs/", { renderOptions: options }).then(async (pdf) => {
  return await pdf.saveAs("waitfor-renderdelay.pdf");
});

Sonraki kod bloğu, popüler bir SEO metin editörü üzerindeki bir elementin başarıyla seçilebilmesi için IronPDF'i yapılandırır.

import { PdfDocument, defaultChromePdfRenderOptions, WaitForType } from "@ironsoftware/ironpdf";
import './config.js'; // Import the configuration script

// Configure the Chrome Renderer to wait up to 20 seconds for a specific element to appear
var options = defaultChromePdfRenderOptions();
options.waitFor = {
  type: WaitForType.HtmlElement,
  htmlQueryStr: "div.ProseMirror",
  maxWaitTime: 20000,
}
PdfDocument.fromUrl("https://app.surferseo.com/drafts/s/V7VkcdfgFz-dpkldsfHDGFFYf4jjSvvjsdf", { renderOptions: options }).then(async (pdf) => {
  return await pdf.saveAs("waitfor-htmlelement.pdf");
});

import { PdfDocument, defaultChromePdfRenderOptions, WaitForType } from "@ironsoftware/ironpdf";
import './config.js'; // Import the configuration script

// Configure the Chrome Renderer to wait up to 20 seconds for a specific element to appear
var options = defaultChromePdfRenderOptions();
options.waitFor = {
  type: WaitForType.HtmlElement,
  htmlQueryStr: "div.ProseMirror",
  maxWaitTime: 20000,
}
PdfDocument.fromUrl("https://app.surferseo.com/drafts/s/V7VkcdfgFz-dpkldsfHDGFFYf4jjSvvjsdf", { renderOptions: options }).then(async (pdf) => {
  return await pdf.saveAs("waitfor-htmlelement.pdf");
});