Angular中如何读取文件为字符串以适配dxf-parser？

问题根源 #

你的代码中fileReader.readAsText(file)是异步操作，它不会直接返回读取到的文本，而是返回undefined，所以直接打印text得不到预期结果。真正的读取结果仅在onload回调函数内的fileReader.result中可用。

修正后的FileReader写法 #

upDxf(event: any) {
  const file: File = event.target.files[0];
  const fileReader = new FileReader();

  fileReader.onload = (e) => {
    // 读取完成后，这里拿到正确的文本字符串
    const dxfText = fileReader.result as string;
    console.log(dxfText);
    
    // 在此处调用dxf-parser处理文本
    const parser = new DxfParser();
    try {
      const dxfData = parser.parseSync(dxfText);
      // 处理解析后的DXF数据
      console.log(dxfData);
    } catch (err) {
      console.error('DXF解析失败:', err);
    }
  };

  // 启动异步读取，无需接收返回值
  fileReader.readAsText(file);
}

更简洁的现代API写法（无需FileReader） #

File对象继承自Blob，可直接使用text()方法异步读取字符串，代码更简洁：

async upDxf(event: any) {
  const file: File = event.target.files[0];
  if (!file) return;

  try {
    // 直接读取文件为字符串
    const dxfText = await file.text();
    console.log(dxfText);
    
    // 传给dxf-parser解析
    const parser = new DxfParser();
    const dxfData = parser.parseSync(dxfText);
    console.log(dxfData);
  } catch (err) {
    console.error('文件读取或解析失败:', err);
  }
}

注意事项 #

• 编码适配：若DXF文件使用非UTF-8编码（如GBK），在使用FileReader时可指定编码：fileReader.readAsText(file, 'GBK')；若用text()方法，需结合TextDecoder处理特殊编码。
• 异步逻辑顺序：所有依赖读取结果的操作（如dxf-parser解析）必须放在回调函数内或await之后，不能在读取操作外部直接使用结果。

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