如何通过JavaScript从WebDAV目录获取PDF并读取文本？

一、服务器端配置CORS（最优解） #

如果有权限修改WebDAV服务器的配置，直接添加CORS响应头就能解决跨域问题：

• Apache服务器：在.htaccess或主配置文件中添加规则，指定允许跨域访问的前端域名（生产环境别用*）：

  Header set Access-Control-Allow-Origin "https://你的前端域名.com"
  Header set Access-Control-Allow-Methods "GET, OPTIONS"
  Header set Access-Control-Allow-Headers "Content-Type"
  

• Nginx服务器：在WebDAV对应的location块中配置：

  add_header Access-Control-Allow-Origin "https://你的前端域名.com";
  add_header Access-Control-Allow-Methods "GET, OPTIONS";
  add_header Access-Control-Allow-Headers "Content-Type";
  
  # 处理OPTIONS预检请求
  if ($request_method = OPTIONS) {
      return 204;
  }
  

二、后端代理中转（无服务器权限时用） #

没法修改WebDAV配置的话，用你的前端项目对应的后端做代理，让后端请求WebDAV的PDF再返回给前端：

• 举个Node.js（Express）的简单示例：

  const express = require('express');
  const axios = require('axios');
  const app = express();
  
  app.get('/proxy-pdf', async (req, res) => {
    try {
      const pdfUrl = req.query.url; // 前端传入的WebDAV PDF地址
      const response = await axios.get(pdfUrl, { responseType: 'arraybuffer' });
      res.set('Content-Type', 'application/pdf');
      res.send(response.data);
    } catch (err) {
      res.status(500).send('获取PDF失败');
    }
  });
  
  app.listen(3000);
  

  前端直接请求这个代理接口，就不会触发跨域限制了。

三、本地文件加载问题的解决 #

浏览器安全限制禁止前端JS直接访问file://协议的本地文件，测试本地PDF的话，启动一个本地静态服务器即可：

• 用Python3：在PDF所在目录执行 python -m http.server，然后通过http://localhost:8000/xxx.pdf地址请求。

四、提取PDF文本的实现 #

拿到PDF二进制数据后，用pdf.js库提取文本：

async function extractPdfText(pdfData) {
  const pdf = await pdfjsLib.getDocument({ data: pdfData }).promise;
  let fullText = '';
  for (let pageNum = 1; pageNum <= pdf.numPages; pageNum++) {
    const page = await pdf.getPage(pageNum);
    const textContent = await page.getTextContent();
    fullText += textContent.items.map(item => item.str).join(' ');
  }
  return fullText;
}

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