NARZęDZIA PDF

Jak drukować plik PDF w JavaScript

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

Darrius Serrant

Zaktualizowano:28 lipca, 2025

1.0 Wprowadzenie

Format PDF został opracowany przez firmę Adobe w celu udostępniania dokumentów zawierających tekst i grafikę. Aby otworzyć dokument PDF online, potrzebny jest dodatkowy program. Pliki PDF są bardzo ważne dla kluczowych informacji w dzisiejszym społeczeństwie. Wiele firm tworzy dokumenty i faktury w formacie PDF. Aby sprostać potrzebom klientów, programiści tworzą dokumenty PDF. Dzięki nowoczesnym bibliotekom tworzenie plików PDF nigdy nie było łatwiejsze.

Aby wybrać idealną bibliotekę do projektu wykorzystującego tego rodzaju biblioteki, musimy rozważyć szereg czynników, w tym możliwości kompilacji, odczytu i konwersji.
W tym samouczku omówimy różne biblioteki JavaScript służące do tworzenia plików PDF. Przeanalizujemy bibliotekę JS i rzeczywiste scenariusze zastosowań, skupiając się na trzech głównych punktach:

Konfiguracja uruchomieniowa
Moduły ułatwiające pisanie oraz czcionki niestandardowe
Łatwość użytkowania

Po przeczytaniu tego tekstu będziesz w stanie wybrać idealną bibliotekę PDF dla swojej aplikacji JavaScript. Na koniec omówimy również IronPDF, przydatną i skuteczną bibliotekę do obsługi plików PDF.

Jak wydrukować plik PDF w JavaScript

Osadź plik PDF w tagu iframe
Uzyskaj dostęp do opcji PRINT dostępnej w przeglądarce plików PDF w ramce iframe
Wydrukuj plik PDF bieżącej strony przy użyciu JavaScript
Wywołaj metodę printJS i przekaż identyfikator elementu do właściwości printable
Użyj alternatywnej biblioteki do drukowania w .NET C#, korzystając z metody PRINT

2.0 Biblioteki

Rozważmy scenariusz, w którym chcemy, aby klient mógł pobrać i wydrukować kopię naszej faktury. Potrzebujemy, aby ta faktura została wydrukowana poprawnie i w odpowiedni sposób. W tym miejscu przyjrzymy się bliżej kilku z wielu bibliotek dostępnych do konwersji tej faktury z formatu HTML do PDF.

2.1 Zwykły kod JavaScript

Zazwyczaj, aby wydrukować zawartość pliku PDF, pobieramy go na komputer, otwieramy i wybieramy opcję PRINT. Z kolei JavaScript ułatwia drukowanie plików PDF bezpośrednio ze stron internetowych. Wystarczy ramka iframe na stronie internetowej lub możliwość dynamicznego jej utworzenia, dodania dokumentu i wydrukowania go. Pokażę, jak używać JavaScript do drukowania pliku PDF. Strona internetowa umieszczona wewnątrz innej strony internetowej jest wyświetlana za pomocą ramki iframe. Aby strona internetowa mogła się wyświetlić, ramka iframe musi znać swoje źródło.

<!DOCTYPE html>
<html>
<head>
    <title>JavaScript Print PDF</title>
</head>
<body>

    <iframe 
        src="Demo.pdf" id="myFrame" 
        frameborder="0" style="border:0;" 
        width="300" height="300">
    </iframe>
    <p>

        <input type="button" id="bt" onclick="printPdf()" value="Print PDF" />
    </p>

    <script>
        // JavaScript function to print the PDF inside the iframe
        let printPdf = () => {
            // Access the iframe
            let objFra = document.getElementById('myFrame');
            // Focus the iframe's window
            objFra.contentWindow.focus();
            // Trigger the print dialog
            objFra.contentWindow.print();
        }
    </script>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
    <title>JavaScript Print PDF</title>
</head>
<body>

    <iframe 
        src="Demo.pdf" id="myFrame" 
        frameborder="0" style="border:0;" 
        width="300" height="300">
    </iframe>
    <p>

        <input type="button" id="bt" onclick="printPdf()" value="Print PDF" />
    </p>

    <script>
        // JavaScript function to print the PDF inside the iframe
        let printPdf = () => {
            // Access the iframe
            let objFra = document.getElementById('myFrame');
            // Focus the iframe's window
            objFra.contentWindow.focus();
            // Trigger the print dialog
            objFra.contentWindow.print();
        }
    </script>
</body>
</html>

HTML

Aby wydrukować plik PDF, zawartość dokumentu można wyświetlić za pomocą ramki iframe, a następnie wydrukować ją przy użyciu JavaScript. W obu sytuacjach wymagana jest ramka iframe. W powyższym przykładzie znajduje się ramka iframe ze źródłem (plik PDF). Istnieje również element wejściowy typu przycisk.

Właściwość onclick przycisku wywoła metodę printPdf.

Jak wydrukować plik PDF w JavaScript: Rysunek 1 – Drukowanie

2.2 Print.js

Print.js został stworzony przede wszystkim po to, aby umożliwić nam drukowanie plików PDF z poziomu naszych aplikacji bez konieczności opuszczania strony, importowania i drukowania ich z poziomu interfejsu użytkownika lub korzystania z osadzonych elementów. Dotyczy to szczególnych sytuacji, w których użytkownicy muszą jedynie wydrukować pliki PDF i nie muszą ich otwierać ani pobierać.

Może to być pomocne na przykład wtedy, gdy użytkownicy proszą o wydrukowanie raportów generowanych po stronie serwera. Raporty te są zwracane w formie dokumentów PDF. Pliki te można drukować bez konieczności ich otwierania. W naszych aplikacjach Print.js zapewnia wygodny sposób drukowania tych plików.

<!DOCTYPE html>
<html>
<head>
    <title>Print.js Example</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.js"></script>
    <script src="https://printjs-4de6.kxcdn.com/print.min.js"></script>
    <link href="https://printjs-4de6.kxcdn.com/print.min.css" rel="stylesheet">   
</head>
<body>

    <div id="print-area" class="print-main">
        <table>
            <tr>
                <th>Name</th>
                <th>Age</th>
            </tr>
            <tr>
                <td>AAA</td>
                <td>25</td>
            </tr>
            <tr>
                <td>BBB</td>
                <td>24</td>
            </tr>
        </table>
    </div>

    <button id="btnPrint">Print</button>

    <script>
        $(document).ready(function(){
            // When the print button is clicked
            $("#btnPrint").on("click", function(){
                // Use Print.js to print the content of #print-area
                printJS({
                    printable: 'print-area',
                    type: 'html'
                });
            });
        });
    </script>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
    <title>Print.js Example</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.js"></script>
    <script src="https://printjs-4de6.kxcdn.com/print.min.js"></script>
    <link href="https://printjs-4de6.kxcdn.com/print.min.css" rel="stylesheet">   
</head>
<body>

    <div id="print-area" class="print-main">
        <table>
            <tr>
                <th>Name</th>
                <th>Age</th>
            </tr>
            <tr>
                <td>AAA</td>
                <td>25</td>
            </tr>
            <tr>
                <td>BBB</td>
                <td>24</td>
            </tr>
        </table>
    </div>

    <button id="btnPrint">Print</button>

    <script>
        $(document).ready(function(){
            // When the print button is clicked
            $("#btnPrint").on("click", function(){
                // Use Print.js to print the content of #print-area
                printJS({
                    printable: 'print-area',
                    type: 'html'
                });
            });
        });
    </script>
</body>
</html>

HTML

Powyższy kod służy do drukowania plików PDF bezpośrednio ze strony internetowej. Pokazuje on, że wydrukowanie spowoduje wydrukowanie wszystkich ciągów HTML dostępnych wewnątrz elementu HTML o identyfikatorze "print-area".

Jak wydrukować plik PDF w JavaScript: Rysunek 2 – Drukowanie tych ciągów znaków

2.3 IronPDF — biblioteka PDF dla Node.js

IronPDF to kompleksowa biblioteka PDF dla Node.js, która wyróżnia się dokładnością, łatwością obsługi i szybkością działania. Oferuje szeroki wachlarz funkcji do generowania, edycji i formatowania plików PDF bezpośrednio z HTML, adresów URL i obrazów w React. Dzięki obsłudze różnych platform, w tym Windows, MacOS, Linux, Docker oraz platform chmurowych, takich jak Azure i AWS, IronPDF zapewnia kompatybilność międzyplatformową. Jego przyjazny dla użytkownika interfejs API pozwala programistom na szybką integrację generowania i edycji plików PDF z ich projektami Node.js.

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.

Oto przykład generowania i zapisywania dokumentu PDF z pliku HTML, ciągu znaków HTML i adresu URL w celu zachowania formatowania do druku:

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

// An async function to demonstrate how to generate PDF documents
(async () => {
    // Create a PDF from a URL
    const pdfFromUrl = await PdfDocument.fromUrl("https://getbootstrap.com/");
    // Save it to a file
    await pdfFromUrl.saveAs("website.pdf");

    // Create a PDF from a local HTML file
    const pdfFromHtmlFile = await PdfDocument.fromHtml("design.html");
    // Save it to a file
    await pdfFromHtmlFile.saveAs("markup.pdf");

    // Create a PDF from an HTML string
    const pdfFromHtmlString = await PdfDocument.fromHtml("<p>Hello World</p>");
    // Save it to a file
    await pdfFromHtmlString.saveAs("markup_with_assets.pdf");
})();

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

// An async function to demonstrate how to generate PDF documents
(async () => {
    // Create a PDF from a URL
    const pdfFromUrl = await PdfDocument.fromUrl("https://getbootstrap.com/");
    // Save it to a file
    await pdfFromUrl.saveAs("website.pdf");

    // Create a PDF from a local HTML file
    const pdfFromHtmlFile = await PdfDocument.fromHtml("design.html");
    // Save it to a file
    await pdfFromHtmlFile.saveAs("markup.pdf");

    // Create a PDF from an HTML string
    const pdfFromHtmlString = await PdfDocument.fromHtml("<p>Hello World</p>");
    // Save it to a file
    await pdfFromHtmlString.saveAs("markup_with_assets.pdf");
})();

JAVASCRIPT

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

Jak wydrukować plik PDF w JavaScript: Rysunek 3 – IronPDF

3.0 Wnioski

Użytkownik może zobaczyć powyższy kod JavaScript, ale może on zostać wykorzystany przez osoby trzecie. Wykorzystanie kodu źródłowego w ten sposób jest możliwe. Ponadto dodanie do strony internetowej kodu, który zagraża bezpieczeństwu przesyłanych przez nią danych, nie jest trudne. Wspomniana biblioteka JavaScript jest wyświetlana różnie w różnych przeglądarkach. Kod musi zatem działać na różnych systemach przed wydaniem. Ponieważ niektóre nowe funkcje nie są obsługiwane przez starsze przeglądarki, musimy również sprawdzić ich kompatybilność z przeglądarkami. Wymienione powyżej biblioteki umożliwiają tworzenie plików PDF. Użytkownik musi również posiadać pewną znajomość skryptu, z którym pracuje.

Dzięki prostemu procesowi integracji IronPDF z frameworkami i bibliotekami zbudowanymi w JavaScript, doskonałej dokumentacji IronPDF for Node.js i przykładowym kodom oraz responsywnemu wsparciu technicznemu, programiści mogą rozpocząć pracę w mgnieniu oka, co czyni IronPDF najlepszym wyborem do generowania i drukowania profesjonalnych plików PDF w aplikacjach związanych z Node.js.

IronPDF oferuje bezpłatną wersję próbną dla Node.js, dzięki czemu można przetestować pełną funkcjonalność przed podjęciem świadomej decyzji. Jest również dostępna w innych językach, takich jak C# .NET, Java i Python. Więcej szczegółów można znaleźć na stronie internetowej IronPDF. Pobierz IronPDF for Node.js ze strony pobierania IronPDF Node.js.

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