虽然最终没有很好的实现文档预览,而是用的图片代替,但是还是决定记录一下,对此展示下小白的风范~~~~
有这样一个任务:弄一个二维码,手机扫描之后打开网页,网页上显示的内容是将word文档(里面大部分是一张张表格)里面内容展示出来,也就是所谓的预览文档。还有一个是上面是视频的展示,下面预览文档内容。这个需求紧急,需要很快出二维码拿去用
接到任务想到以下方案:
1)使用文档预览第三方插件
2)直接在页面上画表格
第二种方案暂时搁浅,毕竟表格较多,而且样式不一,需要花费挺多时间的。所以打算先采用第一种方案
第三方插件经过网上的搜索,还有技术群里大神们的指点,决定先用微软的Office Online在线预览Office文档
(一)Office Online在线预览Office文档,这个方案说是一个url就可以访问了
https://view.officeapps.live.com/op/view.aspx?src=文件地址
但是这个文件地址需要满足几点要求:
1)文件地址在浏览器中可以访问,也就是说需要放外网(可以放在服务器端)
2)文件地址需要用域名访问,不能用ip地址
3)文件地址访问端口为80端口 (这一点我们的服务器不满足,所以也试不了,真是心塞)
前面两个条件都满足,但是唯独第三点没有满足(后端这几天也不在我也不会),所以尝试的结果就是失败了,所以就放弃这个微软的文档预览插件了
(二) 网上寻觅了另外一个插件, vue-office
真是几经波折(中间的过程就不说了),还加了人家插件作者咨询,虽然后来手机扫码打开网页word文档可以预览了,但是奈何表格显示不全,好在作者的提醒将word文档转成pdf文档才终于可以看全。
正当我满心欢喜以为OK的时候,竟然发生~~~ 苹果手机上扫码打开看不到内容(安卓手机微信可以打开),尴尬。问了插件作者,也无能为力,只能放弃这个方案了
网上还有说用docx-preview插件的,缺点就是格式可能会乱掉,看了下感觉不怎么会用,也放弃了这个插件
前面几个方案已经花费太多时间去调试测试了,这边一直催着要。。。
以解决问题优先,我突然想到一个很low的做法,因为文档里面页数总体不是特别多,我就将pdf文档转成一张张图片,打算用图片的形式展示。这真是没有办法的办法(因为不想自己一个一个画表格)。
图片用工具压缩后清晰度也还可以,大小也还行。就这样弄上去了,网页正常打开,速度还算可以,清晰度也还行。
最后注意一个点:网址转成二维码的时候,最好不要带ip地址而是写出域名,因为如果是ip地址的话二维码直接识别会打开一个提示:该地址为ip地址,请使用域名访问网站。
虽然最后说可行的,但是经过这次任务发现:
1)现在基本用框架写项目,离开了框架竟然啥都不会
2)一些基础之前肯定完全没有弄懂,这次和别人交流中发现完全懵逼
3)我需要不断学习。。。