Chat PDF AI上线：nextjs中pdf文件的解析

最近几天，又上线了一个AIGC工具站：Chat PDF AI

基于PDF的问答、摘要等。

这次搞这个，比较麻烦的事PDF的解析，因为这和部署有关。

方案一：使用pdfjs-dist

import * as pdfjsLib from 'pdfjs-dist'
pdfjsLib.GlobalWorkerOptions.workerSrc = `//cdnjs.cloudflare.com/ajax/libs/pdf.js/${pdfjsLib.version}/pdf.worker.min.mjs`
/*注意，这里要mjs,因为js是找不到的。*/

  const fetchPdfContent = async (pdfSrc:string) => {
    try {
      // Use the proxy API to fetch the PDF
      const proxyUrl = `/api/xxx?url=${encodeURIComponent(pdfSrc)}`
      const pdf = await pdfjsLib.getDocument(proxyUrl).promise
      let fullText = ''
      for (let i = 1; i <= pdf.numPages; i++) {
        const page = await pdf.getPage(i)
        const textContent = await page.getTextContent()
        const pageText = textContent.items.map((item: any) => item.str).join(' ')
        fullText += pageText + '\n'
      }
      console.log(fullText)
      setPdfContent(fullText)
}

这样是可以成功解析PDF的，但是部署到cloud flare就有问题了，因为cloudflare是不支持一些node内置的模块的，因为它是部署在边缘。所以部署时，会报错：大致的意识是：不能使用fs, http/https, url这几个node内置的东西。

方案二：unpdf

这是cloud flare推荐的方案。确实方便一些。关键代码：

  import { getDocumentProxy, extractText} from "unpdf";

const fetchPdfContent = async (pdfSrc:string) => {
    try {
      // 使用代理API获取PDF内容
       const proxyUrl = `/api/xxx?url=${encodeURIComponent(pdfSrc)}`
      
      // 使用fetch获取PDF数据
      const response = await fetch(proxyUrl);
      const arrayBuffer = await response.arrayBuffer();
      const pdf = await getDocumentProxy(new Uint8Array(arrayBuffer));
      constdata = await extractText(pdf, {mergePages: true}); 
      setPdfContent(data.text); 
}

解析没有问题，但部署到cloud flare上依旧有问题。因为使用了getDocumentProxy, extractText这两个unpdf的模块，导致有个worker的大小超过了1M，在cloud flare上，worker超过1M就要付费。

这个unpdf，真不愧是cloud flare推荐的啊。

总结

最后，我把这个项目部署在了vercel上。