Jak generować pliki PDF przy użyciu JavaScript
1.0 Wprowadzenie
Firma Adobe opracowała format PDF w celu udostępniania dokumentów zawierających tekst i grafikę. Do otwarcia pliku PDF online potrzebny jest dodatkowy program. W dzisiejszym świecie pliki PDF są bardzo ważne dla ważnych dokumentów. Do tworzenia dokumentacji i faktur wiele firm korzysta z plików PDF. Programiści tworzą i generują pliki PDF dokumentów, aby zaspokoić potrzeby klientów. Dzięki nowoczesnym bibliotekom tworzenie plików PDF nigdy nie było łatwiejsze. Wybierając idealną bibliotekę do projektu, musimy wziąć pod uwagę szereg czynników, w tym możliwości biblioteki w zakresie kompilacji, odczytu i konwersji.
W tym artykule omówimy różne biblioteki JavaScript do tworzenia plików PDF. Omówimy funkcje i przykłady zastosowań biblioteki JS, skupiając się na trzech kluczowych aspektach:
- Kompatybilność ze środowiskiem uruchomieniowym
- Obsługa niestandardowych czcionek i modułów typograficznych
- Łatwość użytkowania
Po przeczytaniu tego artykułu będziesz w stanie wybrać bibliotekę PDF najlepiej pasującą do Twojej aplikacji JavaScript. Przedstawimy również IronPDF, potężną i poręczną bibliotekę do obsługi plików PDF.
Kroki tworzenia plików PDF w JavaScript
- Użyj metody
textbiblioteki PDFKit, aby wstawić tekst do pliku PDF - Wykorzystaj metodę
createPdfbiblioteki pdfmake w JavaScript - Utwórz instancję klasy jsPDF z biblioteki jsPDF, aby utworzyć plik PDF
- Przekaż konfiguracje do metody
html2pdfbiblioteki html2pdf - Wykorzystaj metodę
RenderHtmlAsPdfz biblioteki IronPDF
2.0 Biblioteki
Załóżmy, że chcemy, aby klient mógł pobrać i wydrukować fakturę, którą posiadamy. Chcemy również, aby ta faktura drukowała się poprawnie, z odpowiednim formatowaniem. W tym miejscu przyjrzymy się niektórym z najpopularniejszych bibliotek służących do konwersji tej faktury z formatu HTML do PDF.
2.1 PDFKit
Jedną z pierwszych bibliotek PDF wprowadzonych do rozbudowanego ekosystemu JavaScript jest PDFKit. Od momentu premiery w 2012 roku zyskał znaczną popularność i do 2021 roku jest regularnie aktualizowany. PDFKit oferuje obsługę zarówno Node.js, jak i przeglądarek internetowych poprzez Webpack, choć może charakteryzować się nieco wyższym poziomem złożoności w porównaniu z innymi bibliotekami omówionymi w niniejszym artykule. Ponadto, jak zauważymy w porównaniu, niektóre biblioteki PDF są w zasadzie nakładkami na PDFKit.
Obsługiwane są niestandardowe czcionki i osadzanie obrazów; nie ma jednak API wysokiego poziomu. Ponadto dokumentacja jest często skomplikowana. Jak można się spodziewać, wymaga to pewnego przyzwyczajenia i na początku okaże się, że tworzenie plików PDF nie jest najprostszym zadaniem.
// Importing required modules for PDF generation
const PDFDocument = require('pdfkit');
const fs = require('fs');
// Create a new PDF document
const doc = new PDFDocument();
// Add your content to the document here
doc.text('Hello world!');
// Pipe the document to a writable stream
doc.pipe(fs.createWriteStream('Demo.pdf'));
// Finalize the PDF file
doc.end();// Importing required modules for PDF generation
const PDFDocument = require('pdfkit');
const fs = require('fs');
// Create a new PDF document
const doc = new PDFDocument();
// Add your content to the document here
doc.text('Hello world!');
// Pipe the document to a writable stream
doc.pipe(fs.createWriteStream('Demo.pdf'));
// Finalize the PDF file
doc.end();2.2 pdfmake
Biblioteka opakowująca dla PDFKit nosi nazwę pdfmake. Główna różnica między nimi polega na paradygmatach programowania:
pdfmake stosuje podejście deklaratywne, podczas gdy PDFKit opiera się na tradycyjnej technice imperatywnej. W rezultacie biblioteka pdfmake ułatwia skupienie się na pożądanej funkcjonalności generowania plików PDF, zamiast tracić czas na instruowanie biblioteki, jak osiągnąć konkretny rezultat.
Warto jednak zauważyć, że nie wszystko, co wydaje się obiecujące, jest bezbłędne. Korzystanie z Webpacka i próba integracji niestandardowych czcionek z pdfmake może potencjalnie prowadzić do problemów. Niestety, w Internecie dostępnych jest niewiele informacji dotyczących tego problemu. Jeśli nie korzystasz z Webpacka, nadal możesz bez trudu sklonować repozytorium Git i uruchomić skrypt osadzania czcionek.
<!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 downloadPdf() {
// Define the document structure
var docDefinition = {
content: [
{ text: "Hello world" }
],
defaultStyle: {}
};
// Create and print the PDF
pdfMake.createPdf(docDefinition).print();
}
</script>
<button onclick="downloadPdf()">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 downloadPdf() {
// Define the document structure
var docDefinition = {
content: [
{ text: "Hello world" }
],
defaultStyle: {}
};
// Create and print the PDF
pdfMake.createPdf(docDefinition).print();
}
</script>
<button onclick="downloadPdf()">Print pdf</button>
</body>
</html>Wynik działania powyższego kodu przedstawiono poniżej.
2.3 jsPDF
jsPDF to pakiet open source, który wykorzystuje wyłącznie czysty JavaScript do generowania plików PDF. Tworzy stronę PDF i formatuje ją zgodnie z podanymi przez Ciebie ustawieniami. jsPDF to najczęściej używana biblioteka PDF na GitHubie, która jest bardzo niezawodna i dobrze utrzymana. Oferuje ł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 są zgodne z paradygmatem imperatywnym, co może utrudniać projektowanie złożonych układów. Jeśli chodzi o osadzanie czcionek, jedynym dodatkowym krokiem jest konwersja czcionek do plików TTF, co jest prostym procesem.
<!DOCTYPE html>
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.0.272/jspdf.debug.js"></script>
<script>
function generatePDF() {
// 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);
// Save the PDF
pdf.save('Demopdf.pdf');
}
</script>
</head>
<body>
<button onclick="generatePDF()">Print 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 generatePDF() {
// 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);
// Save the PDF
pdf.save('Demopdf.pdf');
}
</script>
</head>
<body>
<button onclick="generatePDF()">Print Pdf</button>
</body>
</html>Wynik działania powyższego kodu przedstawiono poniżej.
2.4 html2pdf
Aby konwertować strony internetowe i szablony na pliki PDF, html2pdf łączy funkcje jsPDF i Html2Canvas w jednym module.
Aby przekonwertować swoją stronę internetową do formatu PDF, wykonaj następujące kroki:
- Zainstaluj bibliotekę JavaScript html2pdf lokalnie na swoim serwerze za pomocą NPM lub dołącz ją do kodu HTML, jak pokazano w poniższym przykładzie:
- Dodaj funkcję "generuj PDF", która będzie wywoływana w celu konwersji określonego fragmentu strony internetowej do formatu PDF. Możesz użyć metody
getElementById, aby wybrać żądany segment. - Dostosuj opcje formatowania, dodając je do zmiennej "opt" przed przekazaniem jej do html2pdf. Pozwala to na zdefiniowanie różnych ustawień generowania plików PDF.
- Umieść na swojej stronie HTML przycisk, który po kliknięciu uruchamia funkcję
generatePDF.
<!DOCTYPE html>
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2pdf.js/0.10.1/html2pdf.bundle.min.js"></script>
<script>
function generatePDF() {
// Define the HTML content
const page = 'Hello World!';
// PDF options
var opt = {
margin: 1,
filename: 'Demopdf.pdf',
image: { type: 'jpeg', quality: 0.98 },
html2canvas: { scale: 2 },
jsPDF: { unit: 'in', format: 'letter', orientation: 'portrait' }
};
// Convert HTML to PDF
html2pdf().set(opt).from(page).save();
}
</script>
</head>
<body>
<button onclick="generatePDF()">Print 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 generatePDF() {
// Define the HTML content
const page = 'Hello World!';
// PDF options
var opt = {
margin: 1,
filename: 'Demopdf.pdf',
image: { type: 'jpeg', quality: 0.98 },
html2canvas: { scale: 2 },
jsPDF: { unit: 'in', format: 'letter', orientation: 'portrait' }
};
// Convert HTML to PDF
html2pdf().set(opt).from(page).save();
}
</script>
</head>
<body>
<button onclick="generatePDF()">Print Pdf</button>
</body>
</html>Poniżej znajduje się wynik działania powyższego kodu.
2.5 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.
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.
Aby wygenerować plik PDF przy użyciu niestandardowego kodu JavaScript, zapoznaj się z poniższym kodem, który w prosty sposób sprawia, że zawartość HTML staje się bardziej atrakcyjna:
import { PdfDocument } from "@ironsoftware/ironpdf";
(async () => {
// Define the JavaScript code to change text color to red
const javascriptCode = "document.querySelectorAll('h1').forEach(function(el){el.style.color='red';})";
// Create rendering options object
const renderOptions = {
enableJavaScript: true,
javascript: javascriptCode,
};
// HTML content to be rendered
const htmlContent = "<h1>Hello World!!</h1>";
// Render HTML content to a PDF
const pdf = await PdfDocument.fromHtml(htmlContent, { renderOptions: renderOptions });
// Save the PDF with the executed JavaScript
await pdf.saveAs("result1.pdf");
})();import { PdfDocument } from "@ironsoftware/ironpdf";
(async () => {
// Define the JavaScript code to change text color to red
const javascriptCode = "document.querySelectorAll('h1').forEach(function(el){el.style.color='red';})";
// Create rendering options object
const renderOptions = {
enableJavaScript: true,
javascript: javascriptCode,
};
// HTML content to be rendered
const htmlContent = "<h1>Hello World!!</h1>";
// Render HTML content to a PDF
const pdf = await PdfDocument.fromHtml(htmlContent, { renderOptions: renderOptions });
// Save the PDF with the executed JavaScript
await pdf.saveAs("result1.pdf");
})();W powyższym kodzie na początku zdefiniowano fragment kodu JavaScript, który zmienia kolor wszystkich elementów <h1> na czerwony. Kod ten jest następnie integrowany z opcjami renderowania wraz z włączeniem wykonywania JavaScript. Następnie określono treść HTML zawierającą element <h1> z tekstem "Hello World!!". Dokument PDF jest generowany na podstawie tej treści HTML z określonymi opcjami renderowania, co gwarantuje, że kod JavaScript zostanie wykonany podczas procesu renderowania. Na koniec wynikowy dokument PDF jest zapisywany jako "result1.pdf". Ten kod pokazuje możliwości IronPDF w zakresie włączania dynamicznych modyfikacji JavaScript do generowania plików PDF, umożliwiając programistom tworzenie spersonalizowanych i interaktywnych dokumentów PDF za pomocą kodu.
3.0 Wnioski
Podsumowując, przedstawiony powyżej kod JavaScript może być podatny na niewłaściwe wykorzystanie i potencjalne zagrożenia bezpieczeństwa, gdy jest używany przez inne osoby. Ważne jest, aby podczas wdrażania takiego kodu na stronie internetowej wziąć pod uwagę możliwość nieautoryzowanego dostępu i luki w zabezpieczeniach danych. Należy również uwzględnić kwestie kompatybilności między różnymi przeglądarkami i platformami, w tym konieczność zapewnienia obsługi starszych przeglądarek, które mogą nie posiadać wszystkich wymaganych funkcji.
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 dostępne do zakupu. 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 jest on 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.
Rozpocznij za DARMO
Rozpocznij za DARMO
Zarezerwuj darmowe Demo na żywo
Nie wymaga karty kredytowej ani tworzenia konta
