ppt转换成H5功能总结

记录一下在工作期间的一个功能需求（在线课件系统）

功能整体不复杂，对前端来说主要的难点在于数据的转化处理，所以前期花了2天时间专门和端对接转化协议，下面从整个操作流程来详细记录。

 

1、上传ppt。

使用了el-upload组件和el-progress组件。

上传组件监测:

• before-upload 用于判断文件大小和文件类型(常用的MIME类型https://www.cnblogs.com/anllin/articles/1994485.html)
• on-success 监测上传成功
• on-error 监测上传失败
• on-progress 监测上传进度，用于显示

用office365和office导入的pptx文件无法获取到文件类型,改成通过获取文件名字后缀判断是否符合导入文件类型

const testmsg = file.name.substring(file.name.lastIndexOf('.') + 1);

注意文件后缀大小写兼容

 

el-progress 进度条组件使用的环形，内部有文字展示，在低版本（v2.4.8之前）内部文字会显示成叉叉icon，高版本不会有这个Bug

 

2、转换数据

上传完以后，等待端转ppt，然后返回，前端开始数据转换

需要枚举的数据较多，所以拆分了多个方法，分2类，一类是类型的判断处理、另一类是枚举数据处理。

在处理公式的时候，涉及到了异步，使用async/await和promise处理，其中遇到2个坑

1、加了async的方法，返回值始终是一个promise,用resolve(‘return的值’)处理以后，就可以获取到想要的返回值了

2、一开始用的forEach循环，循环里的await不会同步，改成ES6的for...of循环就行了。