import {PdfDocument} from "@ironsoftware/ironpdf"; (async () => { // Create a PDF from an HTML string const pdf = await PdfDocument.fromHtml("<h1>Hello World</h1>"); // Export the PDF to a file await pdf.saveAs("output.pdf"); // Advanced Example with HTML Assets // Load external HTML assets: Images, CSS, and JavaScript. const htmlContentWithAssets = "<img src='icons/iron.png'>"; const advancedPdf = await PdfDocument.fromHtml(htmlContentWithAssets); // Save the PDF with loaded assets await advancedPdf.saveAs("html-with-assets.pdf"); })();

NARZęDZIA PDF

Jak wyświetlać pliki PDF w JavaScript

Name: IronPDF
Brand: Iron Software
Availability: InStock
Rating: 4.87 (307 reviews)

Darrius Serrant

Zaktualizowano:28 lipca, 2025

Firma Adobe stworzyła format PDF, aby umożliwić udostępnianie dokumentów zawierających duże ilości tekstu i grafiki. Aby otworzyć plik PDF online, potrzebny jest inny program. Pliki PDF są nieodzowne w dzisiejszym środowisku do publikacji o znacznej objętości. Są one często wykorzystywane w biznesie do tworzenia dokumentów i faktur. Programiści generują pliki PDF, aby sprostać wymaganiom klientów. Nowoczesne biblioteki sprawiły, że tworzenie plików PDF jest łatwiejsze niż kiedykolwiek. Przy wyborze odpowiedniej biblioteki do projektu, który generuje własne renderowane pliki PDF, należy wziąć pod uwagę różne aspekty, w tym możliwości tworzenia, odczytu i konwersji.

2.0 Biblioteki JavaScript

Weźmy na przykład scenariusz, w którym chcemy, aby klient mógł pobrać i wyświetlić kopię naszej faktury. Dodatkowe kwestie, które są dla nas równie ważne, to dokładny układ, wydruk i liczba stron tej faktury. W tej sekcji przyjrzymy się niektórym z najpopularniejszych bibliotek do przeglądania dokumentów PDF.

2.1 HTML2PDF

HTML2PDF łączy funkcje jsPDF i Html2Canvas w jednym module, aby przekształcać strony internetowe i szablony w pełne pliki dokumentów PDF.

Wykonaj poniższe kroki, aby utworzyć plik PDF ze swojej strony internetowej:

Zainstaluj bibliotekę JavaScript html2pdf lokalnie na swoim serwerze za pomocą NPM lub dodaj ją do kodu HTML, tak jak pokazano w przykładzie poniżej.
Utwórz funkcję o nazwie viewPDF, która będzie służyć do konwersji wybranego fragmentu strony internetowej do formatu PDF. Użyj funkcji getElementById, aby wybrać żądany segment.
Przed przekazaniem do html2pdf zmodyfikuj opcje formatowania, dodając je do zmiennej opt. Pozwala to dostosować różne ustawienia dotyczące tworzenia plików PDF.
Umieść na swojej stronie HTML przycisk, który po kliknięciu uruchamia funkcję viewPDF. Ta funkcja wygeneruje plik PDF i otworzy go w osobnej karcie przeglądarki.

<!DOCTYPE html>
<html>
<head>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/html2pdf.js/0.10.1/html2pdf.bundle.min.js"></script>
  <script>
    function viewPDF() {
      // Select the element to convert to PDF
      const element = document.getElementById('content-to-print');

      // Define PDF formatting options
      var opt = {
        margin: 1,
        filename: 'Demopdf.pdf',
        image: { type: 'jpeg', quality: 0.98 },
        html2canvas: { scale: 2 },
        jsPDF: { unit: 'in', format: 'letter', orientation: 'portrait' }
      };

      // Create and open the PDF
      let worker = html2pdf().set(opt).from(element).toPdf().output('blob')
        .then((data) => {
          let fileURL = URL.createObjectURL(data);
          window.open(fileURL);
        });
    }
  </script>
</head>
<body>
    <div id="content-to-print">

        <h1>Hello World!</h1>
    </div>
    <button onclick="viewPDF()">View PDF</button>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/html2pdf.js/0.10.1/html2pdf.bundle.min.js"></script>
  <script>
    function viewPDF() {
      // Select the element to convert to PDF
      const element = document.getElementById('content-to-print');

      // Define PDF formatting options
      var opt = {
        margin: 1,
        filename: 'Demopdf.pdf',
        image: { type: 'jpeg', quality: 0.98 },
        html2canvas: { scale: 2 },
        jsPDF: { unit: 'in', format: 'letter', orientation: 'portrait' }
      };

      // Create and open the PDF
      let worker = html2pdf().set(opt).from(element).toPdf().output('blob')
        .then((data) => {
          let fileURL = URL.createObjectURL(data);
          window.open(fileURL);
        });
    }
  </script>
</head>
<body>
    <div id="content-to-print">

        <h1>Hello World!</h1>
    </div>
    <button onclick="viewPDF()">View PDF</button>
</body>
</html>

HTML

Jak wyświetlać pliki PDF w JavaScript: Rysunek 1

2.3 jsPDF

Oprogramowanie open source o nazwie jsPDF tworzy pliki PDF wyłącznie przy użyciu JavaScript. Generuje obiekt strony jako stronę PDF i formatuje go zgodnie z podanym formatowaniem. Najczęściej używaną i dobrze utrzymywaną biblioteką PDF na GitHubie jest również jsPDF. Zapewnia łatwe w użyciu moduły zarówno dla Node.js, jak i przeglądarek internetowych, ponieważ są one eksportowane zgodnie ze standardem modułów AMD.

Jeśli chodzi o PDFKit, jego interfejsy API działają w modelu imperatywnym, co może utrudniać tworzenie skomplikowanych układów. Jedynym dodatkowym krokiem wymaganym do osadzenia czcionek za pomocą JavaScript jest konwersja czcionek do plików TTF, co jest prostą procedurą. W poniższym przykładzie kodu tworzymy plik PDF, a następnie otwieramy go w osobnej karcie przeglądarki internetowej.

<!DOCTYPE html>
<html>
<head>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.0.272/jspdf.debug.js"></script>
  <script>
    function viewPDF() {
      // Create a new instance of jsPDF
      var pdf = new jsPDF({
        orientation: 'p',
        unit: 'mm',
        format: 'a5',
        putOnlyUsedFonts: true
      });

      // Add text to the PDF
      pdf.text("Hello World", 20, 20);

      // Open the generated PDF in a new browser tab
      window.open(pdf.output('bloburl'));
    }
  </script>
</head>
<body>
  <button onclick="viewPDF()">View Pdf</button>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.0.272/jspdf.debug.js"></script>
  <script>
    function viewPDF() {
      // Create a new instance of jsPDF
      var pdf = new jsPDF({
        orientation: 'p',
        unit: 'mm',
        format: 'a5',
        putOnlyUsedFonts: true
      });

      // Add text to the PDF
      pdf.text("Hello World", 20, 20);

      // Open the generated PDF in a new browser tab
      window.open(pdf.output('bloburl'));
    }
  </script>
</head>
<body>
  <button onclick="viewPDF()">View Pdf</button>
</body>
</html>

HTML

2.3 IronPDF

IronPDF for Node.js upraszcza proces tworzenia i dostosowywania dokumentów PDF za pomocą kodu. Opracowany przez Iron Software, zaufanego dostawcę wysokowydajnych bibliotek do przetwarzania dokumentów, IronPDF oferuje solidne rozwiązanie do generowania plików PDF w środowiskach Node.js. Integruje się płynnie z projektami Node.js, zapewniając programistom potężne narzędzia do łatwego generowania, formatowania i edycji plików PDF.

Najważniejsze funkcje IronPDF for Node.js:

Wszechstronne generowanie plików PDF: Dzięki IronPDF programiści mogą generować pliki PDF z różnych źródeł, w tym HTML, CSS, JavaScript, obrazów i innych typów plików. Ta elastyczność umożliwia tworzenie dynamicznych i atrakcyjnych wizualnie dokumentów PDF dostosowanych do konkretnych wymagań.
Zaawansowane dostosowywanie dokumentów: IronPDF umożliwia programistom wzbogacanie dokumentów PDF o takie funkcje, jak nagłówki, stopki, załączniki, podpisy cyfrowe, znaki wodne i zakładki. Umożliwia to tworzenie profesjonalnych plików PDF z bogatą treścią i elementami interaktywnymi.
Funkcje bezpieczeństwa: IronPDF oferuje solidne funkcje bezpieczeństwa chroniące pliki PDF przed nieautoryzowanym dostępem. Programiści mogą wdrożyć środki bezpieczeństwa, takie jak hasła, podpisy cyfrowe, metadane i inne ustawienia zabezpieczeń, aby chronić poufne informacje zawarte w dokumentach PDF.
Zoptymalizowana wydajność: IronPDF został zaprojektowany z myślą o optymalnej wydajności i oferuje pełną obsługę wielowątkowości oraz tryb asynchroniczny. Zapewnia to wydajne generowanie plików PDF, dzięki czemu nadaje się do zastosowań o znaczeniu krytycznym, gdzie wydajność ma kluczowe znaczenie.
Kompleksowy zestaw funkcji: Dzięki ponad 50 funkcjom do tworzenia, formatowania i edycji dokumentów PDF, IronPDF zapewnia kompleksowe rozwiązanie do wszystkich zadań związanych z plikami PDF. Od podstawowego generowania dokumentów po zaawansowane dostosowywanie i zabezpieczenia — IronPDF oferuje szeroki zakres możliwości, aby zaspokoić potrzeby programistów.

Poniższy przykład kodu tworzy dokument PDF przy użyciu JavaScript, a następnie wyświetla go bezpośrednio z poziomu aplikacji:

import { PdfDocument } from "@ironsoftware/ironpdf";
import fs from "fs";
import open from "open";

(async () => {
  try {
    // Create a PDF from an HTML string
    const pdf = await PdfDocument.fromHtml("<h1>Hello World</h1>");

    // Save the PDF to a temporary file
    const filePath = "html-with-assets.pdf";
    await pdf.saveAs(filePath);

    // Open the PDF file using the default system application
    open(filePath);
  } catch (error) {
    console.error("Error creating or opening PDF:", error);
  }
})();

import { PdfDocument } from "@ironsoftware/ironpdf";
import fs from "fs";
import open from "open";

(async () => {
  try {
    // Create a PDF from an HTML string
    const pdf = await PdfDocument.fromHtml("<h1>Hello World</h1>");

    // Save the PDF to a temporary file
    const filePath = "html-with-assets.pdf";
    await pdf.saveAs(filePath);

    // Open the PDF file using the default system application
    open(filePath);
  } catch (error) {
    console.error("Error creating or opening PDF:", error);
  }
})();

JAVASCRIPT

W tym kodzie:

Generujemy dokument PDF (pdf) na podstawie treści HTML.
Zapisujemy dokument PDF do pliku tymczasowego (html-with-assets.pdf) za pomocą saveAs.
Używamy funkcji open z pakietu open, aby otworzyć plik PDF za pomocą domyślnej aplikacji systemowej. Zazwyczaj spowoduje to otwarcie pliku PDF w domyślnej przeglądarce plików PDF zainstalowanej w systemie, w przeciwnym razie w domyślnej przeglądarce internetowej.

Aby uzyskać więcej przykładów kodu dotyczących zadań związanych z plikami PDF, odwiedź stronę z przykładami kodu IronPDF for Node.js.

Jak wyświetlać pliki PDF w JavaScript: Rysunek 2

Wynik zostanie wygenerowany i wyświetlony tak, jak na powyższym obrazku. Aby dowiedzieć się więcej o IronPDF, zapoznaj się z przewodnikiem IronPDF .NET PDF Viewer Guide.

3.0 Wnioski

Na koniec należy zauważyć, że kod JavaScript wyświetlony na pierwszej stronie powyżej może zostać niewłaściwie wykorzystany i stanowić zagrożenie dla bezpieczeństwa, jeśli zostanie użyty przez inne osoby. Podczas umieszczania takiego kodu na stronie internetowej lub w witrynie należy koniecznie wziąć pod uwagę ryzyko nieautoryzowanego dostępu oraz luki w zabezpieczeniach danych. Ponadto należy wziąć pod uwagę kwestie kompatybilności z przestarzałymi przeglądarkami oraz różnymi systemami operacyjnymi i przeglądarkami.

Natomiast biblioteka IronPDF for Node.js oferuje ulepszone środki bezpieczeństwa chroniące przed potencjalnymi zagrożeniami. Nie jest zależny od konkretnych przeglądarek i jest kompatybilny ze wszystkimi głównymi przeglądarkami. Za pomocą zaledwie kilku wierszy kodu programiści mogą z łatwością tworzyć i odczytywać pliki PDF przy użyciu IronPDF.

Biblioteka oferuje różne opcje licencyjne dostosowane do różnych potrzeb programistów, w tym bezplatną licencję probną dla programistów oraz dodatkowe licencje do nabycia. Pakiet Lite, w cenie $799, obejmuje stałą licencję, roczną pomoc techniczną oraz opcje aktualizacji, bez żadnych opłat cyklicznych. Licencje te mogą być wykorzystywane w środowiskach programistycznych, testowych i produkcyjnych. Ponadto IronPDF jest również dostępny w innych językach, takich jak C# .NET, Java i Python. Więcej szczegółów można znaleźć na stronie internetowej IronPDF.

Darrius Serrant

Czat z zespołem inżynierów teraz

Full Stack Software Engineer (WebOps)

Darrius Serrant posiada tytuł licencjata z informatyki z Uniwersytetu Miami i pracuje jako Full Stack WebOps Marketing Engineer w Iron Software. Już od młodych lat zainteresował się kodowaniem, postrzegając informatykę jako zarówno tajemniczą, jak i dostępną, co czyni ją doskonałym medium dla kreatywności ...

Czytaj więcej