Xây dựng công cụ chỉnh sửa PDF trực tiếp trên trình duyệt với QPDF và WebAssembly

Tài liệu PDF thường xuyên cần được tổ chức lại — dù là sắp xếp trang để luồng văn bản mượt mà hơn, xoay các trang quét bị lệch, hay xóa những trang không cần thiết. Trong bài viết này, chúng ta sẽ khám phá cách xây dựng một công cụ chỉnh sửa PDF chạy hoàn toàn trên trình duyệt (client-side), có khả năng xử lý việc sắp xếp lại, xoay và xóa trang bằng cách sử dụng thư viện QPDF mạnh mẽ được biên dịch sang WebAssembly.

Tại sao nên xử lý PDF ngay trên trình duyệt?

Các công cụ PDF truyền thống thường yêu cầu người dùng tải tài liệu lên máy chủ, điều này tạo ra nhiều bất cập:

• Rủi ro bảo mật: Tài liệu nhạy cảm phải được gửi đến các máy chủ bên ngoài.
• Độ trễ mạng: Các tệp PDF dung lượng lớn mất nhiều thời gian để tải lên và tải xuống.
• Giới hạn kích thước: Các máy chủ thường có quy định hạn chế về dung lượng tệp tải lên.
• Phụ thuộc kết nối: Người dùng cần kết nối Internet liên tục để sử dụng.

Xử lý trực tiếp trên trình duyệt giải quyết triệt để các vấn đề trên:

• Tài liệu luôn nằm trên thiết bị của người dùng.
• Xử lý tức thì bất kể kích thước tệp.
• Không có giới hạn tải lên.
• Có thể hoạt động offline sau khi tải xong các tài nguyên ban đầu.

Tổng quan kiến trúc

Giải pháp của chúng ta sử dụng QPDF được biên dịch sang WebAssembly để thực hiện các thao tác xử lý PDF công nghiệp ngay trong trình duyệt.

Kiến trúc tổng quan của hệ thống

Các công nghệ cốt lõi

1. QPDF - Thư viện xử lý PDF công nghiệp

QPDF là một thư viện C++ trưởng thành cung cấp các khả năng:

• Thao tác trang: Trích xuất, gộp, sắp xếp lại, xoay trang.
• Bảo toàn cấu trúc: Giữ nguyên các dấu trang, liên kết và chú thích.
• Hỗ trợ mã hóa: Xử lý các tệp PDF được bảo vệ bằng mật khẩu.
• Tối ưu hóa luồng: Nén và tuyến tính hóa đầu ra.

2. WebAssembly (WASM)

Bằng cách biên dịch QPDF sang WASM, chúng ta đạt được:

• Hiệu suất gốc: Tốc độ thực thi C++ ngay trong trình duyệt.
• Đầy đủ tính năng: Mọi khả năng của QPDF đều có sẵn phía client.
• Bảo mật Sandbox: Môi trường thực thi cô lập, an toàn.
• Đa nền tảng: Hoạt động trên mọi thiết bị có trình duyệt hiện đại.

Cấu trúc dữ liệu

Để quản lý các thao tác, chúng ta định nghĩa các kiểu dữ liệu và giao diện cho Web Worker.

1. Kiểu dải trang (Page Range)

// types/pdfdata.ts
export type PageRange = [number, number];  // [bắt đầu, kết thúc] bao gồm cả hai

2. Giao diện hàm Worker

// hooks/useqpdf.ts
interface WorkerFunctions {
  init: () => Promise<void>;
  organize: (file: File, range: string) => Promise<ArrayBuffer>;
  rotate: (file: File, degrees: number) => Promise<ArrayBuffer>;
  remove: (file: File, ...ranges: PageRange[]) => Promise<ArrayBuffer>;
  merge: (files: File[]) => Promise<ArrayBuffer>;
  protect: (file: File, options: ProtectOptions) => Promise<ArrayBuffer>;
}

Triển khai chi tiết

1. Tích hợp Web Worker với QPDF WASM

Chúng ta sử dụng Web Worker để chạy các tác vụ nặng nề, đảm bảo giao diện người dùng (UI) không bị đóng băng. Thư viện Comlink giúp đơn giản hóa việc giao tiếp giữa main thread và worker.

// lib/pdf.worker.js
import * as Comlink from "comlink";
import qpdfwasm from "@/lib/qpdfwasm";

let qpdf = null;

const obj = {
  async init() {
    // Khởi tạo module QPDF WASM
    qpdf = await qpdfwasm();
  },

  async organize(file, range) {
    const arrayBuffer = await file.arrayBuffer();
    const uint8Array = new Uint8Array(arrayBuffer);

    // Ghi file đầu vào vào hệ thống tệp ảo của Emscripten
    qpdf.FS.writeFile(`/input.pdf`, uint8Array);

    // Thực thi lệnh QPDF:
    // qpdf input.pdf --pages input.pdf RANGE -- output.pdf
    const params = [
      "/input.pdf",
      "--pages",
      "/input.pdf",
      range,      // ví dụ: "3,1,5-2" để sắp xếp tùy chỉnh
      "--",
      "/output.pdf"
    ];

    qpdf.callMain(params);

    // Đọc kết quả từ hệ thống tệp ảo
    const outputFile = qpdf.FS.readFile("/output.pdf");

    // Dọn dẹp
    qpdf.FS.unlink("/input.pdf");
    qpdf.FS.unlink("/output.pdf");

    return outputFile.buffer;
  }
  
  // ... các hàm rotate, remove khác
};

Comlink.expose(obj);

2. Cú pháp dải trang mạnh mẽ

QPDF hỗ trợ cú pháp chọn trang rất linh hoạt, cho phép người dùng thực hiện các thao tác phức tạp chỉ với một chuỗi văn bản:

• 1-3 → Các trang 1, 2, 3
• 1,4,6 → Các trang 1, 4 và 6
• 3-1 → Các trang 3, 2, 1 (đảo ngược thứ tự)
• 5-z → Từ trang 5 đến trang cuối cùng
• z-1 → Từ trang cuối cùng đến trang đầu tiên (đảo ngược toàn bộ)
• 1-5,8,10-z → Các trang 1-5, 8 và từ 10 đến cuối

3. Thuật toán xóa trang

Để xóa trang, chúng ta thực sự là xác định các trang cần giữ lại. Hàm removeRanges tính toán phần bù của các dải trang cần loại bỏ:

function removeRanges(mainRange, ...excludeRanges) {
  const [start, end] = mainRange;
  const excludeSet = new Set();

  // Thu thập tất cả các trang cần loại bỏ
  excludeRanges.forEach(([s, e]) => {
    for (let i = s; i <= e; i++) excludeSet.add(i);
  });

  // Thu thập các trang còn lại
  const remaining = [];
  for (let i = start; i <= end; i++) {
    if (!excludeSet.has(i)) remaining.push(i);
  }

  // Chuyển đổi sang định dạng dải nén gọn
  const result = [];
  let currentStart = remaining[0];
  let currentEnd = remaining[0];

  for (let i = 1; i < remaining.length; i++) {
    if (remaining[i] === currentEnd + 1) {
      currentEnd = remaining[i];  // Mở rộng dải hiện tại
    } else {
      // Lưu dải hiện tại và bắt đầu dải mới
      result.push(currentStart === currentEnd 
        ? [currentStart] 
        : [currentStart, currentEnd]);
      currentStart = remaining[i];
      currentEnd = remaining[i];
    }
  }

  // Đừng quên dải cuối cùng
  result.push(currentStart === currentEnd 
    ? [currentStart] 
    : [currentStart, currentEnd]);

  return result;
}
// Ví dụ: removeRanges([1, 10], [3, 5], [8, 8])
// Kết quả: [[1, 2], [6, 7], [9, 10]] -> Giữ lại các trang này

Quy trình xử lý

Sơ đồ luồng xử lý dữ liệu

Điểm nổi bật về kỹ thuật

1. Hệ thống tệp ảo

QPDF hoạt động dựa trên tệp, vì vậy chúng ta sử dụng API FS của Emscripten để mô phỏng hệ thống tệp trong bộ nhớ:

// Ghi tệp vào hệ thống tệp ảo
qpdf.FS.writeFile(`/input.pdf`, uint8Array);

// Thực thi lệnh QPDF
qpdf.callMain(params);

// Đọc kết quả
const output = qpdf.FS.readFile("/output.pdf");

// Dọn dẹp
qpdf.FS.unlink("/input.pdf");

2. Giao diện dòng lệnh (CLI)

QPDF WASM cung cấp chính xác giao diện CLI như phiên bản desktop:

# Desktop
qpdf input.pdf --pages input.pdf 3,1,2 -- output.pdf

# WASM (thông qua callMain)
qpdf.callMain(["/input.pdf", "--pages", "/input.pdf", "3,1,2", "--", "/output.pdf"])

So sánh tính năng

Tính năng	Lệnh QPDF	Ví dụ
Sắp xếp lại	--pages input.pdf RANGE	1,3,2 → Trang 1,3,2
Đảo ngược	--pages input.pdf z-1	z-1 → Cuối lên đầu
Trích xuất	--pages input.pdf RANGE	5-10 → Chỉ trang 5-10
Xoay	--rotate=DEGREES:1-z	+90:1-z → Xoay 90°
Xóa	--pages input.pdf KEPT	1-2,4-z → Xóa trang 3

Luồng người dùng hoàn chỉnh

Giao diện và luồng sử dụng của người dùng

Kết luận

Việc xây dựng công cụ chỉnh sửa PDF phía client với QPDF WASM minh chứng cho sức mạnh của việc đưa các thư viện C++ gốc lên nền tảng web. Bằng cách kết hợp sức mạnh xử lý của QPDF, hiệu suất của WebAssembly, khả năng đa luồng của Web Workers và sự tiện lợi của Comlink, chúng ta đã tạo ra một công cụ:

• Bảo mật tuyệt đối: Tài liệu không bao giờ rời khỏi thiết bị.
• Hiệu suất cao: Tốc độ thực thi ngang ngữ bản desktop.
• Đầy đủ tính năng: Sử dụng toàn bộ bộ tính năng của QPDF.
• Linh hoạt: Cú pháp biểu thức trang mạnh mẽ.
• Đa nền tảng: Hoạt động trên mọi thiết bị hiện đại.

Khả năng sắp xếp, xoay và xóa trang bằng các lệnh văn bản đơn giản khiến việc tổ chức PDF trở nên dễ dàng và hiệu quả hơn bao giờ hết.