如何在Angular 9应用中嵌入MS Project（MPP）查看器仅显示甘特图？

嘿，针对你的需求（仅查看甘特图、无需编辑、优先免费方案），我整理了几个可行的方案，适配Angular 9环境：

方案一：开源解析库+Angular甘特图组件（完全免费） #

这个方案不需要依赖第三方服务，全在本地处理MPP文件，适合注重隐私和成本的场景。

步骤拆解： #

1. 安装依赖包

   • 用mpp-parser（开源MPP解析库，MIT许可证）读取MPP文件的任务、工期、依赖等核心数据：

     npm install mpp-parser --save
     

   • 选择一款支持Angular 9的开源甘特图组件，比如angular-gantt（同样MIT许可证）：

     npm install angular-gantt@适配Angular9的版本 --save
     

     注：安装前可以查一下该组件的版本兼容说明，确保和Angular 9匹配

2. 解析MPP文件
   在Angular服务中编写解析逻辑，读取用户上传的MPP文件（通过<input type="file">获取File对象），然后用mpp-parser解析：

   import { Parser } from 'mpp-parser';
   
   export class MppParserService {
     async parseMppFile(file: File): Promise<any> {
       const arrayBuffer = await file.arrayBuffer();
       const parser = new Parser();
       const project = parser.parse(arrayBuffer);
       // 提取甘特图需要的核心字段：任务名称、开始时间、结束时间、依赖关系等
       return project.tasks.map(task => ({
         name: task.name,
         start: task.start,
         end: task.finish,
         dependencies: task.predecessors?.map(p => p.taskId) || []
       }));
     }
   }
   

3. 渲染甘特图
   在组件中引入甘特图组件，将解析后的数据传入配置：

   <angular-gantt
     [tasks]="parsedTasks"
     [options]="{
       mode: 'view',
       readonly: true
     }"
   ></angular-gantt>
   

   然后在组件类中调用解析服务，把结果赋值给parsedTasks即可。

注意：mpp-parser对较新版本的MPP文件（比如2016+）的支持可能有限，建议提前测试你的目标文件格式。

方案二：Syncfusion Angular甘特图组件（免费社区版） #

如果你想要更稳定的甘特图渲染效果，Syncfusion的Angular甘特图组件有免费社区版（适用于个人开发者和小团队），可以配合MPP解析库使用。

优势： #

• 组件本身功能完善，支持甘特图的缩放、任务筛选等查看功能
• 官方文档详细，适配Angular 9的版本明确
• 同样可以结合mpp-parser解析MPP数据，然后映射到Syncfusion组件需要的格式

方案三：格式转换后渲染（折中方案） #

如果开源解析库对你的MPP文件兼容性不好，可以考虑先将MPP文件导出为MS Project XML格式（MS Project自带导出功能），然后在Angular应用中解析XML数据，再用甘特图组件渲染。这种方式的好处是XML格式的解析难度更低，兼容性更好，适合无法直接解析MPP的场景。

小提示： #

• 所有方案都要确保Angular 9的依赖版本兼容，比如在安装组件时指定适配的版本号
• 若需要支持大量用户或复杂MPP文件，可能需要考虑付费的MPP解析API，但你的需求（仅查看甘特图）用免费方案完全足够

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