需求
需要系统中展示的ppt案例有一个动态展示的效果,也就是要有动画的交互,要求支持浏览器直接打开预览
背景
目前已经实现了前端上传pptx文件,后端解析为png的图片,前端掉接口返回对应的图片,模拟播放ppt的效果
各种尝试实践
1、服务器直接存储pptx文件,浏览器直接打开。
谷歌,ie直接下载
Micrisoft Edge会转为在线处理pptx文件的一个网站然后打开预览
且谷歌也有这样一个网站,但是打不开,可能需要连外网
https://view.officeapps.live.com/op/view.aspx?src=你的pptx文件地址&wdOrigin=BROWSELINK
预览效果如下,可以有动态交互效果
尝试本地保存为静态页面,未果,遂弃之
2、将每一个ppt页面都手动转化为html页面
在将pptx文件转化为一个个html页面后,我发现,页面依然是静态的,也就是说,poi的包不支持去解析pptx文件为html后依旧保持原有交互
3、前端寻找插件,或者自己解析pptx文件
这里我已经精疲力竭了,好像已经没有什么思路了,找了半天资料,感觉前端也不是不能自己解析,这个留在最后没有办法以后再看吧
4、第三方jar包
第三方jar包,直接转为html,无法达到动态效果,效果大体会比原来转图片的效果好,部分的字体会有溢出,但是依然是静态的图片组成的页面,部分字体溢出的问题,在编辑的时候尽量不要以字符结尾即可解决
5、继续尝试寻找插件,或jar包
未果
6、将pptx转化为svg
在经历了千辛万苦之后,我发现是真的无法找到满足我的需求的工具了,我想起了借鉴一下微软的做法,我打开了他们在线转化的网站,发现了他们是一大堆的svg图片加css样式去实现的,想到我们也只是需要一些基本的动态交互效果,感觉确实可行,保留一下
7、将pptx转化为ODP格式
我还想着有没有哪种格式是浏览器可以识别的,pptx可以转化的,且能保留一定的动态交互效果的格式,查找了半天,看到一个说ODP格式有动态效果,且浏览器可以直接打开,抱着激动的心情,我将pptx文件转化为ODP文件,最后拿浏览器访问时,直接又是下载。(这里备注一下,浏览器在遇到自己无法识别的文件,都会去下载)
8、将pptx文件转化为ppt文件
这个时候有点病急乱投医的感觉了,明知道不会有结果的事,还是尝试了,浏览器打开ppt文件依然是下载
小结
ppt文件不可以在软件内部直接打开,通过解析后又无法保留原有的交互,.ppt和.pptx文件无法通过转化格式的方式在浏览器上直接打开后还能保存动态交互的,但是借鉴微软浏览器的处理方式,当你打开.ppt或.pptx结尾的文件时,它会有一个在线解析的网址,可以支持你在网页直接打开并且保留一定的交互。所以我自己的系统在处理时也可以参照,将每一个ppt都保存为一个svg图,通过css的样式去达到一个动态交互的效果。具体交互方式看自己需求。
初步方案预想:PPT文件转存为svg格式通过设置样式的方式去实现动态交互
重点分析
1、样式的嵌入方式(如果在svg里直接插入交互样式,后端需要看看怎么具体去实现)
2、svg的动态交互的通用模版具体的实现方式(后端没办法逐一加不同class)
具体实现
1、后端保存pptx文件为svg格式,保存时连同样式名字一起保存,在对应的config配置表中添加不同样式,返回svg的同时返回需要使用的交互样式
2、前端写多套样式模版,存在后台配置中,通过接口获取,动态拼接在页面上