Giới thiệu

Trong quá trình làm việc với các file PDF lớn hơn 2MB trong ứng dụng web, bạn có thể gặp phải vấn đề khi không thể tải chúng trong Iframe. Bài viết này sẽ hướng dẫn bạn cách chuyển đổi một chuỗi base64 thành Blob URL để khắc phục vấn đề này.

Hướng dẫn chuyển đổi base64 sang Blob URL

Để tải file PDF lớn hơn 2MB vào Iframe, trước tiên chúng ta cần chuyển đổi file từ định dạng base64 sang Blob URL. Dưới đây là một hàm JavaScript đơn giản để thực hiện điều này:

export function base64ToBlobUrl({
  base64String,
  contentType,
}: {
  base64String: string;
  contentType: string;
}) {
  if (includes(base64String, "base64")) {
    const parts = base64String?.split(";base64,");
    const type = parts[0]?.split(":")[1];
    const b64Data = parts[1];

    // Chuyển đổi chuỗi base64 thành Uint8Array
    const byteCharacters = atob(b64Data);
    const byteNumbers = new Array(byteCharacters.length);
    for (let i = 0; i < byteCharacters.length; i++) {
      byteNumbers[i] = byteCharacters.charCodeAt(i);
    }
    const byteArray = new Uint8Array(byteNumbers);

    // Tạo một đối tượng Blob từ dữ liệu nhị phân
    const blob = new Blob([byteArray], { type: contentType || type });

    // Tạo URL cho đối tượng Blob
    const blobUrl = URL.createObjectURL(blob);

    return blobUrl;
  }
}

Giải thích chức năng của hàm

1. Kiểm tra chuỗi base64: Đầu tiên, hàm kiểm tra xem chuỗi đã được mã hóa bằng base64 hay chưa.
2. Tách các phần của chuỗi: Hàm tách các phần của chuỗi base64 thành loại và dữ liệu.
3. Chuyển đổi dữ liệu: Dữ liệu base64 được chuyển đổi thành mảng các byte sử dụng atob và Uint8Array.
4. Tạo Blob: Một đối tượng Blob được tạo từ mảng byte, cho phép ta làm việc với dữ liệu nhị phân.
5. Tạo URL cho Blob: Cuối cùng, URL cho Blob sẽ được trả về, cho phép sử dụng trong Iframe để hiển thị file PDF.

Kết luận

Việc sử dụng Blob URL giúp giải quyết vấn đề khi tải file PDF lớn hơn 2MB vào Iframe. Hy vọng rằng hướng dẫn này sẽ giúp bạn khắc phục được vấn đề và cải thiện trải nghiệm người dùng trên ứng dụng web của bạn.
source: viblo