JScript Katana

Cách Tạo và Chỉnh sửa Tệp PDF bằng JavaScript: Hướng Dẫn Toàn Diện, Thư Viện và Các Ví Dụ Thực Tế

Thư viện bên ngoài
佐川 直弘 | Naohiro Sagawa
By 佐川 直弘 | Naohiro Sagawa (運営者)
※記事内に広告を含みます。Amazonアソシエイトとして適格販売により収入を得ています。　
目次

1. Giới thiệu: Tại sao chúng ta cần xử lý PDF bằng JavaScript?

Tầm quan trọng của việc xử lý PDF và vai trò của JavaScript

Trong những năm gần đây, PDF đã trở thành định dạng tệp không thể thiếu trong cả môi trường doanh nghiệp và cá nhân. Hợp đồng, biên lai, hoá đơn và báo cáo hiện nay thường được tạo dưới dạng PDF. Do đó, nhu cầu tự động hoá việc tạo và chỉnh sửa tệp PDF đã tăng lên trong nhiều môi trường phát triển.
JavaScript chạy trực tiếp trong trình duyệt và xuất sắc trong các thao tác động phía client. Khi khai thác những khả năng này, chúng ta có thể tạo và chỉnh sửa PDF một cách hiệu quả. Đặc biệt, khả năng xử lý PDF hoàn toàn trên phía client—không cần máy chủ—đã thu hút sự chú ý đáng kể.

Lợi ích khi sử dụng JavaScript để xử lý PDF

1. Giảm tải cho máy chủ

Trước đây, việc tạo và chỉnh sửa PDF thường được thực hiện ở phía máy chủ. Tuy nhiên, khi dùng JavaScript, quá trình này có thể hoàn thành trên phía client, giảm đáng kể gánh nặng cho máy chủ.

2. Xử lý thời gian thực

Với JavaScript, dữ liệu người dùng có thể ngay lập tức được phản ánh trong PDF. Ví dụ, dữ liệu biểu mẫu có thể ngay lập tức chuyển thành PDF và cung cấp dưới dạng liên kết tải xuống.

3. Tính linh hoạt và tùy chỉnh cao

Bằng cách sử dụng các thư viện JavaScript, bạn có thể dễ dàng tạo ra các PDF tùy chỉnh mạnh mẽ với đồ họa, hình ảnh hoặc văn bản định dạng. Vì JavaScript hoạt động trên hầu hết các trình duyệt hiện đại, các vấn đề liên quan đến môi trường cũng được giảm thiểu.

Các trường hợp sử dụng thực tiễn

1. Tạo tài liệu doanh nghiệp

Có thể dùng để tự động tạo hoá đơn và biên lai, sau đó gửi qua email. Bạn cũng có thể ngay lập tức xuất ra các tài liệu được tùy chỉnh cho từng khách hàng, nâng cao hiệu quả công việc.

2. Xuất dữ liệu biểu mẫu

Bạn có thể triển khai tính năng lưu dữ liệu khảo sát hoặc đơn đăng ký dưới dạng PDF và đăng ký chúng vào hệ thống quản lý. Điều này giúp chuyển đổi từ quy trình xử lý tài liệu bằng giấy sang quy trình số hoá.

3. Tạo báo cáo và tài liệu thuyết trình

Báo cáo có thể được tạo động dựa trên dữ liệu, bao gồm biểu đồ và hình ảnh. Điều này giảm đáng kể thời gian chuẩn bị tài liệu cho các buổi họp hoặc thuyết trình.

Xu hướng tương lai và triển vọng

Việc xử lý PDF dựa trên JavaScript dự kiến sẽ tiếp tục phát triển. Hai xu hướng lớn đang thu hút sự chú ý:

  1. Tích hợp đám mây mạnh mẽ hơn
    Việc tích hợp liền mạch với lưu trữ đám mây hoặc cơ sở dữ liệu sẽ làm tăng nhu cầu đối với các ứng dụng web có khả năng tạo và chỉnh sửa PDF tích hợp sẵn.

  2. Hỗ trợ di động được cải thiện
    Khi tính khả dụng trên smartphone và tablet ngày càng quan trọng, việc tạo PDF tối ưu cho giao diện đáp ứng sẽ tiếp tục được nâng cấp.

2. Top 5 Thư viện JavaScript cho PDF (Kèm Bảng So sánh)

Tầm quan trọng của việc chọn đúng thư viện JavaScript cho PDF

Việc lựa chọn thư viện phù hợp là yếu tố then chốt khi tạo hoặc chỉnh sửa PDF bằng JavaScript. Một thư viện được chọn đúng sẽ tăng năng suất phát triển và cho phép tùy chỉnh nâng cao, bao gồm hỗ trợ văn bản tiếng Nhật. Phần này giới thiệu năm thư viện PDF chính và so sánh các tính năng, trường hợp sử dụng của chúng.

1. PDF.js

Tổng quan

PDF.js là một thư viện xem PDF mã nguồn mở do Mozilla phát triển. Nó chuyên về việc render PDF ngay trong trình duyệt.

Tính năng

  • Chỉ xem: Tập trung hoàn toàn vào việc hiển thị; không hỗ trợ tạo hay chỉnh sửa PDF.
  • Tương thích cao: Hoạt động chỉ với HTML5 và JavaScript—không cần plugin.
  • Hiệu năng tốt: Render nhanh và xử lý hiệu quả các tài liệu lớn.

Trường hợp sử dụng

  • Ứng dụng cần chức năng xem PDF, chẳng hạn như sách điện tử hoặc hợp đồng.

2. jsPDF

Tổng quan

jsPDF là một thư viện nhẹ, chủ yếu dùng để tạo tệp PDF. Nó cho phép chèn dễ dàng văn bản, hình ảnh và bảng, rất phù hợp cho việc tạo tài liệu đơn giản.

Tính năng

  • Tạo PDF: Thích hợp cho việc tạo PDF phía client.
  • Mở rộng: Hỗ trợ các plugin để bổ sung tính năng.
  • Hỗ trợ tiếng Nhật: Có thể sử dụng khi cấu hình phông chữ phù hợp.

Use Cases

  • Tự động tạo biên lai, hoá đơn hoặc báo cáo đơn giản.

3. pdf-lib

Overview

pdf-lib không chỉ hỗ trợ tạo PDF mà còn cho phép chỉnh sửa và hợp nhất. Nó tương thích với TypeScript và tích hợp mượt mà vào các môi trường phát triển hiện đại.

Features

  • Edit Capabilities: Thêm văn bản hoặc hình ảnh vào các PDF hiện có.
  • Flexible Customization: Cung cấp khả năng nhúng phông chữ và kiểm soát bố cục.
  • High Performance: Hiệu quả ngay cả với các thao tác PDF quy mô lớn.

Use Cases

  • Tạo biểu mẫu PDF hoặc báo cáo dữ liệu động.

4. pdfmake

Overview

pdfmake cho phép chỉ định bố cục dễ dàng bằng API khai báo, rất phù hợp cho các thiết kế phức tạp và bố cục bảng.

Features

  • Strong Layout Capabilities: Cấu hình bảng và kiểu dáng dễ dàng.
  • Multilingual Support: Hỗ trợ các phông chữ Nhật cơ bản.
  • JSON-Based: Dễ dàng xây dựng tài liệu động.

Use Cases

  • Báo cáo, danh mục và tài liệu có chứa bảng.

5. html2pdf

Overview

html2pdf chuyển đổi các phần tử HTML trực tiếp thành tệp PDF. Nó lý tưởng cho việc tạo PDF dựa trên thiết kế trang web hiện có.

Features

  • HTML-Based: Giữ nguyên thiết kế HTML/CSS trong đầu ra PDF.
  • Easy to Use: Thiết lập nhanh cho đầu ra đơn giản.
  • Responsive Friendly: Duy trì bố cục trên thiết bị di động.

Use Cases

  • Tính năng in cho các trang web hoặc đầu ra PDF có bố cục cố định.

6. Comparison Table

LibraryViewerGenerateEditJapanese SupportKey Features
PDF.js✔××✔Focused on PDF viewing, fast rendering
jsPDF×✔△△Simple PDF creation, plugin extensibility
pdf-lib×✔✔✔Full-featured editing, TypeScript support
pdfmake×✔△△Powerful layout with declarative API
html2pdf×✔×✔HTML-based easy PDF output

Summary

Mỗi thư viện PDF JavaScript có những điểm mạnh riêng:

  • PDF.js: Tốt nhất cho việc chỉ xem.
  • jsPDF: Tốt nhất cho việc tạo PDF đơn giản.
  • pdf-lib: Lý tưởng cho việc chỉnh sửa hoặc thêm các tính năng phức tạp.
  • pdfmake: Mạnh về thiết kế bảng và bố cục tùy chỉnh.
  • html2pdf: Tốt nhất khi bạn muốn giữ nguyên thiết kế HTML.

3. Implementation Examples: Generating and Editing PDFs with JavaScript

Introduction

JavaScript cho phép tạo và chỉnh sửa PDF dễ dàng phía client. Phần này giới thiệu các triển khai cụ thể bằng các thư viện chính. Hãy thử chạy các mẫu mã dưới đây để hiểu cách chúng hoạt động.

1. Basic PDF Generation with jsPDF

Creating a Simple Text PDF

const doc = new jsPDF();
doc.text("Hello, PDF!", 10, 10);
doc.save("sample.pdf");

Key Points

  1. Create an instance:
  • new jsPDF() tạo một tài liệu PDF mới.
  1. Add text:
  • doc.text() đặt “Hello, PDF!” tại tọa độ (10, 10).
  1. Save PDF:
  • doc.save() tải xuống PDF với tên “sample.pdf”.

Example: Adding an Image

const doc = new jsPDF();
const imgData = 'data:image/jpeg;base64,...';
doc.addImage(imgData, 'JPEG', 10, 40, 180, 160);
doc.save("image-sample.pdf");

2. Editing PDFs with pdf-lib

Adding Text to an Existing PDF

import { PDFDocument } from 'pdf-lib';

async function modifyPDF() {
  const url = 'sample.pdf';
  const existingPdfBytes = await fetch(url).then(res => res.arrayBuffer());
  const pdfDoc = await PDFDocument.load(existingPdfBytes);
  const pages = pdfDoc.getPages();
  const firstPage = pages[0];

  firstPage.drawText('追加されたテキスト', { x: 50, y: 500, size: 20 });

  const pdfBytes = await pdfDoc.save();
  download(pdfBytes, "modified-sample.pdf", "application/pdf");
}

Key Points

  1. Load PDF:
  • Sử dụng PDFDocument.load() .
  1. Edit PDF:
  • drawText() thêm văn bản tại vị trí được chỉ định.
  1. Save & download:
  • Lưu PDF đã chỉnh sửa và tải xuống.

3. Creating Layout-Heavy PDFs with pdfmake

Creating Complex Layouts

const docDefinition = {
  content: [
    { text: 'レポートタイトル', style: 'header' },
    { text: '以下はサンプル表です。' },
    {
      table: {
        body: [
          ['項目1', '項目2', '項目3'],
          ['データ1', 'データ2', 'データ3'],
          ['データ4', 'データ5', 'データ6'],
        ],
      },
    },
  ],
  styles: {
    header: {
      fontSize: 18,
      bold: true,
      margin: [0, 0, 0, 10],
    },
  },
};
pdfMake.createPdf(docDefinition).download('sample-table.pdf');

Các điểm chính

  1. Xác định nội dung: Bảng và văn bản được định nghĩa trong content .
  2. Định nghĩa kiểu dáng: styles kiểm soát cài đặt phông chữ và bố cục.
  3. Tải xuống: Sử dụng download() để xuất PDF.

4. Hỗ trợ phông chữ Nhật (jsPDF)

const doc = new jsPDF();
doc.addFileToVFS('NotoSansJP-Regular.ttf', fontData);
doc.addFont('NotoSansJP-Regular.ttf', 'NotoSansJP', 'normal');
doc.setFont('NotoSansJP');
doc.text('日本語対応テスト', 10, 10);
doc.save("japanese-sample.pdf");

Tóm tắt

Phần này giới thiệu các ví dụ thực tế sử dụng các thư viện chính:

  • jsPDF: Tạo PDF đơn giản và chèn hình ảnh.
  • pdf-lib: Chỉnh sửa PDF hiện có và thao tác trang.
  • pdfmake: Tùy chỉnh bảng và bố cục mạnh mẽ, hỗ trợ một phần tiếng Nhật.

4. Xử lý phông chữ Nhật & Khắc phục sự cố

Giới thiệu

Khi tạo PDF bằng JavaScript, việc xử lý phông chữ Nhật là một trong những thách thức phổ biến nhất. Các vấn đề như ký tự không đọc được hoặc thiếu glyph thường xuyên xảy ra. Phần này giải thích cách cấu hình phông chữ Nhật đúng cách và cách khắc phục các vấn đề thường gặp.

1. Các vấn đề thường gặp với phông chữ Nhật

Tại sao cần nhúng phông chữ

PDF dựa trên tiếng Anh thường hiển thị đúng với phông chữ mặc định, nhưng tiếng Nhật yêu cầu xử lý đặc biệt vì:

  • Phông chữ Nhật bao gồm nhiều ký tự không có trong phông chữ mặc định.
  • Một số thư viện có hỗ trợ phông chữ Nhật hạn chế.
  • Nếu không nhúng phông chữ, PDF có thể hiển thị không đúng tùy vào môi trường.

Các lỗi thường gặp

  • Ký tự bị rối: Hiển thị dưới dạng □ hoặc ? do thiếu hỗ trợ phông chữ.
  • Bố cục bị hỏng: Khoảng cách dòng hoặc kích thước phông chữ không đúng.
  • Lỗi tải phông chữ: Không thể tải tệp phông chữ tùy chỉnh.

2. Xử lý phông chữ Nhật trong jsPDF

Chuẩn bị tệp phông chữ

Để nhúng phông chữ Nhật, bạn cần một phông chữ TrueType (.ttf). Ví dụ: Noto Sans JP.

  1. Tải xuống: Lấy Noto Sans JP từ Google Fonts.
  2. Chuyển đổi sang Base64: Chuyển tệp phông chữ thành chuỗi Base64.

Mã ví dụ

const doc = new jsPDF();
doc.addFileToVFS('NotoSansJP-Regular.ttf', fontData);
doc.addFont('NotoSansJP-Regular.ttf', 'NotoSansJP', 'normal');
doc.setFont('NotoSansJP');
doc.text('こんにちは、世界！', 10, 10);
doc.save('japanese-sample.pdf');

Giải thích

  • addFileToVFS: Đăng ký dữ liệu phông chữ Base64.
  • addFont: Định nghĩa tên và kiểu phông chữ.
  • setFont: Áp dụng phông chữ.

3. Xử lý phông chữ Nhật trong pdfmake

Chuẩn bị và thiết lập phông chữ

var fonts = {
  Roboto: {
    normal: 'Roboto-Regular.ttf',
    bold: 'Roboto-Bold.ttf',
    italics: 'Roboto-Italic.ttf',
    bolditalics: 'Roboto-BoldItalic.ttf',
  },
};

var docDefinition = {
  content: [
    { text: '日本語テスト', font: 'Roboto', fontSize: 14 },
    { text: 'Hello, World!', fontSize: 12 },
  ],
};

pdfMake.createPdf(docDefinition).download('japanese-sample.pdf');

Giải thích

  • Mỗi kiểu phông chữ phải được cấu hình riêng.
  • Thuộc tính font được sử dụng để chỉ định phông chữ trong nội dung.

4. Khắc phục sự cố

Văn bản không hiển thị đúng

  • Nguyên nhân có thể: Tệp phông chữ không đúng hoặc chuyển đổi Base64 sai.
  • Giải pháp:
  1. Xác nhận việc nhúng Base64.
  2. Kiểm tra tính toàn vẹn của tệp .ttf.
  3. Đảm bảo MIME type đúng.

Bố cục bị hỏng

  • Nguyên nhân: Khoảng cách dòng không đúng.
  • Giải pháp: Định nghĩa thủ công fontSize và lineHeight .

Vấn đề mã hoá trên thiết bị di động

  • Nguyên nhân: Thiết bị thiếu phông chữ Nhật.
  • Giải pháp: Luôn nhúng phông chữ.

Tóm tắt

  • jsPDF: Nhúng phông chữ đơn giản bằng Base64.
  • pdfmake: Kiểm soát bố cục mạnh mẽ nhưng yêu cầu cấu hình phông chữ chi tiết.

5. Kỹ thuật nâng cao & Giải pháp cho các trường hợp sử dụng

Giới thiệu

Các thư viện PDF trong JavaScript có thể hỗ trợ các trường hợp sử dụng nâng cao như tạo PDF động, tích hợp cơ sở dữ liệu, bố cục tùy chỉnh, và hơn nữa.

1. Tạo PDF từ dữ liệu động

Tạo báo cáo từ JSON

const doc = new jsPDF();
const data = [
  { 名前: "山田太郎", 年齢: 30, 職業: "エンジニア" },
  { 名前: "佐藤花子", 年齢: 25, 職業: "デザイナー" },
  { 名前: "田中一郎", 年齢: 40, 職業: "マネージャー" },
];
doc.text('ユーザーレポート', 10, 10);
doc.autoTable({
  head: [['名前', '年齢', '職業']],
  body: data.map(item => [item.名前, item.年齢, item.職業]),
});
doc.save('report.pdf');

Các điểm chính

  • Dữ liệu động: Chuyển đổi JSON thành các hàng bảng.
  • Quản lý bố cục: Sử dụng plugin autoTable để tạo bảng dễ dàng.

2. Gộp & Tách PDF

Gộp nhiều PDF (pdf-lib)

import { PDFDocument } from 'pdf-lib';

async function mergePDFs(pdfUrls) {
  const mergedPdf = await PDFDocument.create();

  for (let url of pdfUrls) {
    const existingPdf = await fetch(url).then(res => res.arrayBuffer());
    const pdfDoc = await PDFDocument.load(existingPdf);
    const copiedPages = await mergedPdf.copyPages(pdfDoc, pdfDoc.getPageIndices());
    copiedPages.forEach(page => mergedPdf.addPage(page));
  }

  const pdfBytes = await mergedPdf.save();
  download(pdfBytes, "merged.pdf", "application/pdf");
}

Các điểm chính

  • Sao chép các trang từ nhiều PDF.
  • Gộp thành một tài liệu duy nhất.

3. Trường biểu mẫu PDF

Tạo trường nhập (pdf-lib)

import { PDFDocument } from 'pdf-lib';

async function createForm() {
  const pdfDoc = await PDFDocument.create();
  const page = pdfDoc.addPage([500, 700]);

  const form = pdfDoc.getForm();
  const nameField = form.createTextField('name');
  nameField.setText('名前を入力してください');
  nameField.addToPage(page, { x: 50, y: 600, width: 300, height: 30 });

  const pdfBytes = await pdfDoc.save();
  download(pdfBytes, "form.pdf", "application/pdf");
}

Các điểm chính

  • Hỗ trợ nhập liệu động từ người dùng.
  • Dữ liệu trường có thể được sử dụng cho xử lý tiếp theo.

4. Bố cục tùy chỉnh

Đầu trang & Chân trang (pdfmake)

const docDefinition = {
  header: { text: 'レポートヘッダー', alignment: 'center', margin: [0, 10, 0, 0] },
  footer: function(currentPage, pageCount) {
    return { text: `${currentPage} / ${pageCount}`, alignment: 'right', margin: [0, 0, 10, 0] };
  },
  content: [
    { text: 'レポート本文', fontSize: 12 },
  ],
};
pdfMake.createPdf(docDefinition).download('custom-layout.pdf');

5. Hỗ trợ di động & đáp ứng

Tạo PDF từ HTML (html2pdf)

const element = document.getElementById('content');
html2pdf(element);

Tóm tắt

Các kỹ thuật nâng cao:

  • Dữ liệu động: Xây dựng PDF từ JSON.
  • Gộp/chỉnh sửa: Sử dụng pdf-lib cho việc chỉnh sửa nâng cao.
  • Trường biểu mẫu: Tạo tài liệu tương tác.
  • Thiết kế tùy chỉnh: Sử dụng pdfmake cho tài liệu có bố cục phong phú.

6. Câu hỏi thường gặp (FAQ)

Giới thiệu

Phần này trả lời các câu hỏi thường gặp mà các nhà phát triển gặp phải khi tạo hoặc chỉnh sửa PDF bằng JavaScript.

1. Các thao tác cơ bản

Câu hỏi 1. Thư viện nào là tốt nhất để tạo PDF trong JavaScript?

Đáp: Chọn dựa trên nhu cầu của bạn:

  • Tạo PDF đơn giản: jsPDF
  • Chỉnh sửa & gộp: pdf-lib
  • Bố cục phức tạp: pdfmake
  • HTML sang PDF: html2pdf

Câu hỏi 2. Làm sao để hiển thị văn bản tiếng Nhật đúng cách?

Đáp: Thực hiện các bước sau:

  1. Chuẩn bị một phông chữ tiếng Nhật (Noto Sans JP, IPA, v.v.)
  2. Chuyển đổi phông chữ sang Base64
  3. Nhúng nó bằng cách sử dụng addFileToVFS() và addFont()
  4. Chọn nó bằng setFont()

Câu hỏi 3. Tại sao văn bản tiếng Nhật bị lỗi trên thiết bị di động?

Đáp: Các thiết bị di động thiếu phông chữ tiếng Nhật.
Giải pháp: Luôn nhúng phông chữ tiếng Nhật.

Câu hỏi 4. Làm sao để thêm trường chữ ký?

Đáp: Bạn có thể chèn hình ảnh chữ ký bằng pdf-lib:

page.drawImage(imgData, {
  x: 50,
  y: 100,
  width: 200,
  height: 100,
});

2. Sử dụng nâng cao

Câu hỏi 5. Tôi có thể chèn mã QR động vào PDF không?

Đáp: Có, sử dụng jsPDF.

Câu hỏi 6. Tôi có thể xuất biểu mẫu HTML sang PDF không?

Đáp: Có, với html2pdf.

Tóm tắt

FAQ này sẽ giúp bạn khắc phục sự cố và tối ưu quy trình PDF bằng JavaScript của mình.

7. Kết luận

Giới thiệu

Bài viết này cung cấp một giải thích chi tiết về cách tạo và chỉnh sửa PDF bằng JavaScript, bao gồm các thao tác cơ bản, kỹ thuật nâng cao, so sánh các thư viện và xử lý phông chữ Nhật Bản.

1. Tiện lợi và Tính linh hoạt của các thao tác PDF dựa trên JavaScript

JavaScript chạy trên phía client, cho phép tạo và chỉnh sửa PDF theo thời gian thực. Điều này giảm tải cho máy chủ và hỗ trợ các tính năng tương tác.

Lợi ích:

  • Giảm phụ thuộc vào máy chủ
  • Tương tác và xem trước theo thời gian thực
  • Tương thích cao với các trình duyệt hiện đại

2. Tóm tắt Lựa chọn Thư viện

LibraryFeaturesBest Use Cases
PDF.jsViewer onlyPDF display apps
jsPDFSimple & lightweightText and image PDFs
pdf-libEditing, merging, form creationComplex dynamic PDFs
pdfmakeAdvanced layoutReports, catalogs
html2pdfHTML/CSS to PDFWeb-page PDF output

3. Tóm tắt Các ví dụ Triển khai

  • Tạo PDF cơ bản
  • Báo cáo dữ liệu động
  • Chỉnh sửa PDF hiện có
  • Xử lý phông chữ Nhật Bản
  • Kiểm soát thiết kế & bố cục tùy chỉnh

4. Triển vọng Tương lai

Hệ sinh thái PDF bằng JavaScript sẽ tiếp tục phát triển:

  1. Tích hợp đám mây được cải thiện
  2. Tạo tài liệu hỗ trợ AI
  3. Các thư viện mới cho tốc độ và khả năng mở rộng

Kết luận

JavaScript ngày càng trở nên thiết yếu cho việc xử lý PDF trong các ứng dụng web và hệ thống doanh nghiệp. Bằng cách tận dụng các thư viện và kỹ thuật được thảo luận trong bài viết này, bạn có thể triển khai các giải pháp PDF linh hoạt và chất lượng cao một cách dễ dàng.

広告