如何用JavaScript从Supabase存储桶获取PDF内容并提取文本？

步骤1：获取Supabase存储中PDF的二进制数据 #

你已经拿到文件元数据，接下来可以用Supabase Storage的download方法获取文件的二进制Blob数据，需要用到存储桶名称和文件路径（从元数据的path_tokens或name字段获取）。

示例代码：

<script>
import { createClient } from '@supabase/supabase-js';

// 初始化Supabase客户端（替换为你的项目信息）
const supabase = createClient('你的Supabase URL', '你的Supabase公钥');

async function getPdfAndExtractText(fileMetadata) {
  try {
    // 替换为你的存储桶名称
    const bucketName = 'your-bucket-name';
    // 从元数据中获取文件路径
    const filePath = fileMetadata.name;

    // 下载文件获取Blob
    const { data: pdfBlob, error } = await supabase.storage.from(bucketName).download(filePath);
    
    if (error) throw error;

    // 提取文本（见步骤2）
    const text = await extractTextFromPdf(pdfBlob);
    console.log('提取的PDF文本:', text);
    return text;
  } catch (err) {
    console.error('处理PDF时出错:', err);
  }
}
</script>

步骤2：从PDF Blob中提取文本 #

使用pdfjs-dist库解析PDF并提取文本，先安装依赖：

npm install pdfjs-dist

实现提取文本的函数：

<script>
import * as pdfjsLib from 'pdfjs-dist';
import * as pdfjsWorker from 'pdfjs-dist/build/pdf.worker.entry';

// 设置PDF Worker路径
pdfjsLib.GlobalWorkerOptions.workerSrc = pdfjsWorker;

async function extractTextFromPdf(pdfBlob) {
  // 将Blob转为ArrayBuffer
  const arrayBuffer = await pdfBlob.arrayBuffer();
  // 加载PDF文档
  const pdfDoc = await pdfjsLib.getDocument({ data: arrayBuffer }).promise;
  
  let fullText = '';
  // 遍历每一页提取文本
  for (let pageNum = 1; pageNum <= pdfDoc.numPages; pageNum++) {
    const page = await pdfDoc.getPage(pageNum);
    const textContent = await page.getTextContent();
    // 拼接每页文本
    const pageText = textContent.items.map(item => item.str).join(' ');
    fullText += pageText + '\n\n';
  }
  
  return fullText;
}
</script>

关键注意事项 #

• 权限设置：确保Supabase存储桶的权限允许当前用户读取目标文件，否则会返回权限错误。
• CORS配置：如果Svelte项目部署在外部域名，需在Supabase控制台的存储设置中配置对应CORS规则。
• 性能优化：针对大体积PDF，建议在Supabase Edge Functions等后端服务处理文本提取，避免前端性能瓶颈。

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