使用Angular实现文件上传并在控制台输出多格式文件数据

浏览器本身没有提供这三类二进制格式的原生解析API，核心实现思路是引入前端专用解析库，将上传获取的文件二进制流转换为可读文本/结构化数据后，输出到控制台即可。

通用前置上传逻辑 #

你可以复用已有的txt文件上传监听逻辑，先统一获取上传的File对象：

const fileInput = document.querySelector('input[type="file"]');
fileInput.addEventListener('change', async (e) => {
  const file = e.target.files[0];
  if (!file) return;
  const fileExt = file.name.split('.').pop().toLowerCase();

  // 原有TXT解析逻辑
  if (fileExt === 'txt') {
    const txtContent = await file.text();
    console.log('TXT文件内容：', txtContent);
    return;
  }

  // 其他格式分支调度
  switch(fileExt) {
    case 'docx':
      await parseDocx(file);
      break;
    case 'pptx':
      await parsePptx(file);
      break;
    case 'pdf':
      await parsePdf(file);
      break;
    default:
      console.log('不支持的文件格式');
  }
})

各格式专属解析实现 #

• docx格式 #

使用mammoth.js纯前端库完成解析，可直接提取docx的纯文本内容：

async function parseDocx(file) {
  const fileBuffer = await file.arrayBuffer();
  const parseResult = await mammoth.extractRawText({ arrayBuffer: fileBuffer });
  console.log('DOCX文件内容：', parseResult.value);
  if (parseResult.messages.length > 0) {
    console.warn('DOCX解析警告：', parseResult.messages);
  }
}

• pptx格式 #

使用pptx2json库解析，可获取到每页PPT的文本、样式、结构等数据：

async function parsePptx(file) {
  const fileBuffer = await file.arrayBuffer();
  const parser = new Pptx2Json();
  const pptContent = await parser.parse(fileBuffer);
  console.log('PPTX文件结构化内容：', pptContent);
  // 如需只输出纯文本，可遍历slides字段提取所有text字段拼接即可
}

• pdf格式 #

使用官方维护的pdf.js库解析，可逐页提取PDF文本内容：

// 需提前配置pdf.js的worker路径，CDN引入时直接对应配置即可
pdfjsLib.GlobalWorkerOptions.workerSrc = 'pdf.worker.min.js';

async function parsePdf(file) {
  const fileBuffer = await file.arrayBuffer();
  const pdfDoc = await pdfjsLib.getDocument({ data: fileBuffer }).promise;
  const fullPdfText = [];

  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(' ');
    fullPdfText.push(`第${pageNum}页：${pageText}`);
  }

  console.log('PDF文件内容：\n', fullPdfText.join('\n'));
}

补充说明 #

• 上述所有解析库都支持CDN直接引入，无打包工具的原生前端项目也可直接使用
• 大文件解析可能存在数秒延迟，可根据需要添加加载状态提示
• 如果你只需要输出文件元数据（大小、修改时间、MIME类型等），不需要引入第三方库，直接打印File对象即可查看

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