Przejdź do treści stopki
NARZęDZIA PDF

Jak tworzyć pliki PDF w JavaScript

W dziedzinie udostępniania dokumentów format PDF (Portable Document Format), wprowadzony przez firmę Adobe, odgrywa kluczową rolę w zachowaniu integralności treści bogatych w tekst i atrakcyjnych wizualnie. Dostęp do pliku PDF online zazwyczaj wymaga specjalnego programu. W dzisiejszym cyfrowym świecie pliki PDF stały się nieodzowne dla różnych ważnych publikacji. Wiele firm korzysta z plików PDF do tworzenia profesjonalnych dokumentów i faktur. Ponadto programiści często wykorzystują biblioteki do tworzenia plików PDF, aby spełnić konkretne wymagania klientów. Proces generowania plików PDF został usprawniony dzięki pojawieniu się nowoczesnych bibliotek. Przy wyborze biblioteki najlepiej pasującej do projektu związanego z generowaniem plików PDF należy wziąć pod uwagę takie czynniki, jak możliwości tworzenia, odczytu i konwersji, aby zapewnić płynną integrację i optymalną wydajność.

Biblioteki JavaScript

Weźmy na przykład scenariusz, w którym chcemy, aby klient mógł bez wysiłku pobrać i wydrukować kopię naszej faktury w formacie PDF. Ponadto niezwykle ważne jest dla nas zachowanie dokładnego układu faktury i zapewnienie bezbłędnej jakości druku.

W tej sekcji zagłębimy się w szereg wysoko cenionych bibliotek JavaScript, które wyróżniają się w konwersji i tworzeniu dokumentów HTML do formatu PDF, zapewniając nam wszechstronne narzędzia do wydajnego i dokładnego generowania oraz konwersji dokumentów.

1. PDFKit

PDFKit była biblioteką PDF, która jako jedna z pierwszych została wprowadzona do rozległego ekosystemu bibliotek JavaScript. Od momentu premiery w 2012 roku jego popularność znacznie wzrosła, a od 2021 roku nadal jest regularnie aktualizowany.

Korzystając z Webpack, PDFKit zapewnia obsługę zarówno biblioteki Node, jak i przeglądarek internetowych; obsługiwane są niestandardowe czcionki i osadzanie obrazów.

Jednak, jak zobaczymy w porównaniu, niektóre biblioteki PDF są w rzeczywistości tylko nakładkami na PDFKit i być może nieco łatwiejszymi w użyciu niż sam PDFKit.

Dla PDFKit nie jest dostępne API wysokiego poziomu. Dokumentacja również często stanowi wyzwanie. Jak można się spodziewać, wymaga to pewnego przyzwyczajenia i może się okazać, że tworzenie plików PDF przy użyciu JavaScript nie zawsze jest najłatwiejszym zadaniem.

// Requiring the necessary modules for file system and PDF document creation.
const fs = require('fs');
const PDFDocument = require('pdfkit');

// Create a new PDF document instance
const doc = new PDFDocument();

// Add text content to the PDF document
doc.text('Hello world!');

// Define the output file location and start writing the PDF content to it
doc.pipe(fs.createWriteStream('Demo.pdf'));

// Finalize the PDF file
doc.end();
// Requiring the necessary modules for file system and PDF document creation.
const fs = require('fs');
const PDFDocument = require('pdfkit');

// Create a new PDF document instance
const doc = new PDFDocument();

// Add text content to the PDF document
doc.text('Hello world!');

// Define the output file location and start writing the PDF content to it
doc.pipe(fs.createWriteStream('Demo.pdf'));

// Finalize the PDF file
doc.end();
JAVASCRIPT

2. pdfmake

W przeciwieństwie do PDFKit, który wykorzystuje konwencjonalną metodę imperatywną do generowania treści, pdfmake stosuje podejście deklaratywne. W rezultacie korzystanie z biblioteki pdfmake ułatwia skupienie się na zamierzonej funkcjonalności tworzenia plików PDF, zamiast tracić czas na uczenie biblioteki, jak osiągnąć określony rezultat.

Należy pamiętać, że chociaż niektóre rozwiązania mogą wydawać się obiecujące, mogą nie być pozbawione wad. Jednym z przykładów jest integracja niestandardowych czcionek z pdfmake przy użyciu Webpacka, co może potencjalnie prowadzić do problemów. Niestety, dostępna w Internecie dokumentacja dotycząca tego konkretnego problemu jest ograniczona. Jeśli jednak nie korzystasz z Webpacka, możesz łatwo sklonować repozytorium Git i uruchomić skrypt osadzania czcionek, aby pokonać wszelkie potencjalne przeszkody związane z integracją czcionek niestandardowych.

<!DOCTYPE html>
<html>
<head>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.56/pdfmake.min.js"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.56/vfs_fonts.js"></script>
</head>
<body>
    <script type="text/javascript">
        // Function to create and print a PDF document
        function CreatePdf() {
            // Define document content and styles
            var docDefinition = {
                content: [
                    { text: "Hello world" } // Text content to be included in the PDF
                ],
                defaultStyle: {}
            };
            // Create and print the PDF using pdfMake library
            pdfMake.createPdf(docDefinition).print();
        }
    </script>

    <button onclick="CreatePdf()">Print pdf</button>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.56/pdfmake.min.js"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.56/vfs_fonts.js"></script>
</head>
<body>
    <script type="text/javascript">
        // Function to create and print a PDF document
        function CreatePdf() {
            // Define document content and styles
            var docDefinition = {
                content: [
                    { text: "Hello world" } // Text content to be included in the PDF
                ],
                defaultStyle: {}
            };
            // Create and print the PDF using pdfMake library
            pdfMake.createPdf(docDefinition).print();
        }
    </script>

    <button onclick="CreatePdf()">Print pdf</button>
</body>
</html>
HTML

Jak tworzyć pliki PDF w JavaScript: Rysunek 1

3. IronPDF

IronPDF powstał, aby ułatwić programistom tworzenie, przeglądanie i edycję dokumentów PDF. Działa jako potężny konwerter plików PDF i oferuje podstawowy interfejs API do tworzenia, edycji i przetwarzania plików PDF.

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.

Biblioteka IronPDF oferuje szeroki zakres funkcji, w tym możliwość dzielenia i łączenia stron w nowych lub istniejących dokumentach PDF, odczytywania i edytowania istniejących plików PDF, wyodrębniania obrazów z plików PDF, dodawania tekstu, grafiki, zakładek, znaków wodnych, nagłówków i stopek do plików PDF — wszystko to bez konieczności korzystania z programu Acrobat Reader. Z plików CSS i plików mediów CSS można tworzyć dokumenty PDF. IronPDF umożliwia użytkownikom tworzenie, przesyłanie i aktualizowanie zarówno nowych, jak i istniejących formularzy 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 dla 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 kod pokazuje, jak użyć JavaScript do renderowania HTML do pliku PDF o idealnej rozdzielczości:

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

(async () => {
    // HTML content containing JavaScript to be executed upon rendering
    const htmlWithJavaScript = `<h1>This is HTML</h1>
    <script>
        document.write('<h1>This is JavaScript</h1>');
        window.ironpdf.notifyRender(); // Notify IronPDF when rendering is done
    </script>`;

    // Rendering options to enable JavaScript
    const renderOptions = {
        enableJavaScript: true,
    };

    // Render HTML content to a PDF
    const pdf = await PdfDocument.fromHtml(htmlWithJavaScript, { renderOptions });

    // Save the PDF to a file
    await pdf.saveAs("javascript-in-html.pdf");
})();
import { PdfDocument } from "@ironsoftware/ironpdf";

(async () => {
    // HTML content containing JavaScript to be executed upon rendering
    const htmlWithJavaScript = `<h1>This is HTML</h1>
    <script>
        document.write('<h1>This is JavaScript</h1>');
        window.ironpdf.notifyRender(); // Notify IronPDF when rendering is done
    </script>`;

    // Rendering options to enable JavaScript
    const renderOptions = {
        enableJavaScript: true,
    };

    // Render HTML content to a PDF
    const pdf = await PdfDocument.fromHtml(htmlWithJavaScript, { renderOptions });

    // Save the PDF to a file
    await pdf.saveAs("javascript-in-html.pdf");
})();
JAVASCRIPT

Można również uruchomić niestandardowy kod JavaScript, który w prosty sposób modyfikuje wygląd treści HTML:

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

(async () => {
    // JavaScript code to change the text color of header tags to red
    const javascriptCode = "document.querySelectorAll('h1').forEach(function(el){ el.style.color = 'red'; })";

    // HTML content which will be affected by the custom JavaScript
    const htmlContent = "<h1>Happy New Year!</h1>";

    // Rendering options to enable and apply the custom JavaScript
    const renderOptions = {
        enableJavaScript: true,
        javascript: javascriptCode,
    };

    // Render HTML content to a PDF
    const pdf = await PdfDocument.fromHtml(htmlContent, { renderOptions });

    // Save the PDF with the applied JavaScript effects
    await pdf.saveAs("executed_js.pdf");
})();
import { PdfDocument } from "@ironsoftware/ironpdf";

(async () => {
    // JavaScript code to change the text color of header tags to red
    const javascriptCode = "document.querySelectorAll('h1').forEach(function(el){ el.style.color = 'red'; })";

    // HTML content which will be affected by the custom JavaScript
    const htmlContent = "<h1>Happy New Year!</h1>";

    // Rendering options to enable and apply the custom JavaScript
    const renderOptions = {
        enableJavaScript: true,
        javascript: javascriptCode,
    };

    // Render HTML content to a PDF
    const pdf = await PdfDocument.fromHtml(htmlContent, { renderOptions });

    // Save the PDF with the applied JavaScript effects
    await pdf.saveAs("executed_js.pdf");
})();
JAVASCRIPT

Jak tworzyć pliki PDF w JavaScript: Rysunek 2

Po kliknięciu przycisku pobierania zostanie pobrany plik PDF, taki jak ten widoczny na stronie PDF na powyższym obrazku. Utworzony plik PDF będzie wyglądał tak, jak ten poniżej.

Jak tworzyć pliki PDF w JavaScript: Rysunek 3

Wnioski

Należy wspomnieć, że w przypadku wykorzystania przez osoby trzecie powyższy kod JavaScript może potencjalnie prowadzić do nadużyć i problemów związanych z bezpieczeństwem. Podczas umieszczania takiego kodu na stronie internetowej lub witrynie należy koniecznie wziąć pod uwagę zagrożenia, takie jak nieautoryzowany dostęp i luki w zabezpieczeniach danych. Ponadto ważne jest również uwzględnienie konieczności obsługi przestarzałych przeglądarek, które mogą nie posiadać wszystkich niezbędnych funkcji, oraz kwestii kompatybilności z różnymi systemami i przeglądarkami.

IronPDF jest dostępny nie tylko dla Node.js, ale także dla innych popularnych platform, w tym .NET, Java i Python. Ta dostępność na wielu platformach zapewnia spójność i elastyczność programistom pracującym w różnych środowiskach technologicznych. Dzięki bogatemu zestawowi funkcji, płynnej integracji i solidnej wydajności IronPDF jest cennym narzędziem dla programistów pragnących usprawnić generowanie plików PDF w ramach swoich projektów Node.js.

Aby sprostać różnorodnym wymaganiom programistów, biblioteka oferuje szereg opcji licencyjnych, w tym bezplatną licencję probną oraz dodatkowe licencje programistyczne dostępne w sprzedaży. Pakiet $799 Lite obejmuje stałą licencję, 30-dniową gwarancję zwrotu pieniędzy, roczną pomoc techniczną oraz opcje aktualizacji. Poza początkowym zakupem nie ma żadnych dodatkowych kosztów.

Darrius Serrant
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

Zespol wsparcia Iron

Jestesmy online 24 godziny, 5 dni w tygodniu.
Czat
Email
Zadzwon do mnie