如何在Firebase存储PDF？Base64编码文件过大的纯JS压缩方案

1. Firebase中存储PDF文件的方案 #

Firebase完全支持存储PDF文件，但不适合将Base64编码的PDF直接存入Firestore文档——因为Firestore单文档最大限制为1MB，这正是你遇到错误的原因：

Uncaught (in promise) FirebaseError: Document 'projects/jeel-al-ebdaa/databases/(default)/documents/Teachers/testteacher' cannot be written because its size (1,377,477 bytes) exceeds the maximum allowed size of 1,048,576 bytes.

正确的做法是：

• 将PDF文件（或解码后的Blob）直接上传到Firebase Storage，它支持最大5TB的文件存储，完全满足PDF的大小需求。
• 上传完成后，将Storage返回的文件下载URL或存储路径存入Firestore文档，这样既规避了文档大小限制，也方便后续读取和访问PDF。

2. 纯Vanilla JS下的Base64文本压缩方法 #

如果确实需要对Base64编码的PDF内容进行压缩（比如临时处理场景），可以利用浏览器原生的CompressionStream API实现gzip/deflate压缩，步骤如下：

压缩步骤代码示例 #

// 将Base64字符串解码为ArrayBuffer
function base64ToArrayBuffer(base64) {
  // 移除可能存在的data URI前缀
  const cleanBase64 = base64.replace(/^data:application\/pdf;base64,/, '');
  const binaryString = atob(cleanBase64);
  const len = binaryString.length;
  const bytes = new Uint8Array(len);
  for (let i = 0; i < len; i++) {
    bytes[i] = binaryString.charCodeAt(i);
  }
  return bytes.buffer;
}

// 将ArrayBuffer编码为Base64字符串
function arrayBufferToBase64(buffer) {
  const bytes = new Uint8Array(buffer);
  let binary = '';
  const len = bytes.byteLength;
  for (let i = 0; i < len; i++) {
    binary += String.fromCharCode(bytes[i]);
  }
  return btoa(binary);
}

// 压缩Base64格式的PDF内容
async function compressBase64Pdf(base64Pdf) {
  try {
    const arrayBuffer = base64ToArrayBuffer(base64Pdf);
    // 创建gzip压缩流（也可替换为'deflate'格式）
    const compressionStream = new CompressionStream('gzip');
    // 将ArrayBuffer转为可读取流
    const readableStream = new Blob([arrayBuffer]).stream();
    // 执行压缩
    const compressedStream = readableStream.pipeThrough(compressionStream);
    // 将压缩后的流转为ArrayBuffer
    const compressedBuffer = await new Response(compressedStream).arrayBuffer();
    // 转回Base64字符串
    return arrayBufferToBase64(compressedBuffer);
  } catch (error) {
    console.error('压缩失败:', error);
    throw error;
  }
}

// 调用示例
// const yourBase64Pdf = "data:application/pdf;base64,...";
// const compressedBase64 = await compressBase64Pdf(yourBase64Pdf);

注意事项 #

• CompressionStream是现代浏览器的原生API，需确认目标环境支持（Chrome 80+、Firefox 113+、Edge 80+）。
• 压缩后的Base64字符串大小会显著减小，但如果压缩后仍超过1MB，还是建议优先使用Firebase Storage存储原文件，而非强行存入Firestore文档。

内容的提问来源于stack exchange，提问作者Mulham Alamry