Technology

Creating High-Quality PDFs with jsPDF

0

PDF document creation is one of the important functions in various web applications. The JavaScript library jsPDF helps to easily generate PDF documents on the client side. In particular, applying Korean fonts and finely styling text are crucial elements in enhancing the usability and professionalism of web applications. In this article, we will explore how to use jsPDF to add Korean fonts and apply various styles, including making text bold.

1. Setting Up and Basic Usage of jsPDF

First, let’s learn how to install and set up the jsPDF library. By using jsPDF, you can add HTML elements to a PDF document and automatically distribute the content across multiple pages.

import { jsPDF } from 'jspdf';

const doc = new jsPDF();
const text = "This is the default text.";
doc.text(text, 10, 10);
doc.save("example.pdf");

The code above is a basic example of creating and saving a simple PDF document. As you can see, jsPDF allows you to easily add text, images, tables, etc., to PDF documents through a simple API.

2. Adding Korean Fonts

Since the default jsPDF does not support Korean fonts, you need to add a separate font to properly display Unicode characters, including Korean. To do this, convert the font file to a Base64 encoded string and add it to the jsPDF Virtual File System (VFS).

Encoding Font File to Base64 with Python

import base64

# Font file path
font_file_path = 'path/to/your/font.ttf'

# Open the font file and read its contents
with open(font_file_path, 'rb') as font_file:
    font_data = font_file.read()

# Encode the read data to Base64
encoded_font_data = base64.b64encode(font_data)

# Convert the encoded data to a string (necessary in Python 3.x)
encoded_font_string = encoded_font_data.decode('utf-8')

# Print the encoded data
print(encoded_font_string)

# Save the encoded data to a file if needed
with open('encoded_font.txt', 'w') as output_file:
    output_file.write(encoded_font_string)

Adding the Encoded Font to jsPDF

import { jsPDF } from "jspdf";

// Base64 encoded font data
const myKoreanFont = '...'; // Insert the Base64 encoded font data here.

const doc = new jsPDF();

// Add the font file to the VFS
doc.addFileToVFS('MyKoreanFont.ttf', myKoreanFont);
// Register the font
doc.addFont('MyKoreanFont.ttf', 'MyKoreanFont', 'normal');

// Use the registered font
doc.setFont('MyKoreanFont'); 
doc.setFontSize(10);
doc.text("Hello, this is jsPDF!", 10, 10);
doc.save("example.pdf");

The code above shows how to add and use Korean fonts. This allows you to properly display Korean text in your PDF documents.

3. Styling Text: Making Specific Sentences Bold

Let’s learn how to finely style text in a PDF document. Since jsPDF does not directly support partial style changes within text, you need to split the text and apply different styles to each part.

const doc = new jsPDF();
const textBeforeBold = "This is normal text. ";
const boldText = "This is bold text";
const textAfterBold = " This is another normal text.";

// Add normal text
doc.text(textBeforeBold, 10, 20);

// Calculate the starting position for the bold text (simple example)
const boldTextX = 10 + doc.getStringUnitWidth(textBeforeBold) * doc.internal.getFontSize() / 2;

// Change to bold font
doc.setFont('times', 'bold');
doc.text(boldText, boldTextX, 20);

// Change back to normal font
doc.setFont('times', 'normal');
const afterBoldTextX = boldTextX + doc.getStringUnitWidth(boldText) * doc.internal.getFontSize() / 2;
doc.text(textAfterBold, afterBoldTextX, 20);

doc.save("text-with-bold.pdf");

This example shows how to make part of the text bold. It splits the text and calculates the position of each part to apply different styles.

4. Handling Line Breaks and Adjusting Line Spacing for Long Text

Let’s learn how to automatically wrap long text and adjust line height.

const doc = new jsPDF();
const longText = "This is a very long sentence. It should be automatically wrapped into multiple lines. In this example, we can adjust the spacing between lines.";
const maxWidth = 180; // Maximum width
const lineHeight = 10; // Line spacing
const startX = 10;
let startY = 10;

// Split long text into multiple lines
const lines = doc.splitTextToSize(longText, maxWidth);

// Add each line individually while adjusting the line spacing
lines.forEach(line => {
    doc.text(line, startX, startY);
    startY += lineHeight;
});

doc.save("custom-line-height.pdf");

The code above explains how to split long text into multiple lines and add it to a PDF document while adjusting the line spacing.

Conclusion

Using jsPDF, you can create high-quality PDF documents in web applications. By adding Korean fonts and finely styling text, you can create more professional and readable PDF documents. Utilize the methods provided in this article to apply various styles and fonts. This can provide a better experience for your users.

Leave a Reply