IRONSOFTWAREHOME
NARZĘDZIA PDF

Jak wyświetlać pliki PDF w JavaScript

Curtis Chau
Curtis Chau
Updated: 23 kwietnia 2026

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:

  1. 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.
  2. Utwórz funkcję o nazwie viewPDF, która będzie używana do konwersji wybranej sekcji strony internetowej do formatu PDF. Użyj funkcji getElementById, aby wybrać żądany segment.
  3. 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.
  4. Dodaj przycisk na swojej stronie HTML, który po kliknięciu wywołuje 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">
        <!-- Content to convert to PDF -->
        <h1>Hello World!</h1>
    </div>
    <button onclick="viewPDF()">View PDF</button>
</body>
</html>
HTML

Jak przeglądać 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>
HTML

2.3 IronPDF

IronPDF dla 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);
  }
})();
JavaScript

W tym kodzie:

  • Generujemy dokument PDF (pdf) z zawartoś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 przeglądać 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 bezpłatną licencję próbną dla programistów oraz dodatkowe licencje do nabyćia. Pakiet Lite, wyceniony na $999, obejmuje wieczystą licencję, rok wsparcia dla produktu i 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.

Curtis Chau
Autor tekstów technicznych

Curtis Chau posiada tytuł licencjata z informatyki (Uniwersytet Carleton) i specjalizuje się w front-endowym rozwoju, z ekspertką w Node.js, TypeScript, JavaScript i React. Pasjonuje się tworzeniem intuicyjnych i estetycznie przyjemnych interfejsów użytkownika, Curtis cieszy się pracą z nowoczesnymi frameworkami i tworzeniem dobrze zorganizowanych, atrakcyjnych wizualnie podręczników.

...
Czytaj więcej

Powiązane artykuły

Key in blue circle

Uzyskaj natychmiast swój darmowy 30-dniowy Klucz Testowy.

Brak ograniczeń. 100% dostępności. Bez karty kredytowej.

bullet_checkedNie wymaga karty kredytowej ani tworzenia kontaBrak ograniczeń. 100% dostępności. Bez karty kredytowej.
  • Logo Aetna
  • Logo NASA
  • Logo GE
  • Logo Porsche
  • Logo USDA
  • Logo Qatar
Join Millions of Engineers who’ve tried IronPDF
Zarezerwuj swoje darmowe Demo na żywo
Booking Badge

Zaufane przez miliony inżynierów na całym świecie

Logotypy klientów Iron Software
Otrzymaj swoje Konsultacja Bez Zobowiązań
Wypełnij poniższy formularz lub wyślij e-mail na sales@ironsoftware.com
Twoje dane zawsze będą utrzymywane w tajemnicy.
Zaufane przez miliony inżynierów na całym świecie
Logotypy klientów Iron Software
Otrzymaj swój darmowy Klucz Próbny na 30 dni natychmiast.
Nie wymaga karty kredytowej ani tworzenia konta