各款Excel、word在线预览工具对比分析以及onlyoffice预览Excel加载时间长的解决方案

对于onlyoffice插件预览慢的问题分析:

研究了一下onlyoffice,得出以下结论!

对于预览慢的问题,原因出在文件类型上,文件类型为低版本xls而非新版xlsx文件,onlyoffice服务器会自动将该文件转换为xlsx文件再进行渲染,耗时慢主要是这个转换的过程很慢,如果使用xlsx文件,就会跳过这一步,直接渲染,速度上肉眼可见的快;

下面视频是展示两个相同数据量的文件,两种不同格式(xls<49MB>、xlsx<经过前面的文件转换后得到大小为19MB的xlsx文件>)下的加载速度

onlyoffice中xlsx与xls文件预览对比

我研究了一下市面上的开源在线预览插件(vue-office、luckysheet),只支持xlsx、docx的预览,
在这里插入图片描述
在这里插入图片描述
像某系统的预览使用到的是officeonline(应该是收费的),还有一个收费的插件是web-office(收费),这些插件也是支持xls这种低版本excel 的预览,officeonline目前我传了一个22兆的xls文件进行预览尝试,显示文件过大,最大支持10MB文件预览
在这里插入图片描述
飞书平台目前的在线文档,下面的截图是上传xls文件,提示是否导入为飞书表格,如果选择否,将只支持查看,选择是将会导入失败,因为飞书表格的编辑不兼容xls格式
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
下面导入xlsx格式文件 ,提示与导入xls时不同,此处选择表格,点击导入,能够正常导入成功
在这里插入图片描述在这里插入图片描述

可见,飞书对编辑和查看有不同的兼容性,我们再使用onlyoffice时,它的底层默认要兼容xls和xlsx的编辑,所以直接将xls转换为了xlsx,各种插件有其实现功能的方案,各有优劣

结论:

根据以上论证,中闽环境下使用的预览插件onlyoffice本身不存在加载慢的问题,只是格式兼容性问题

解决方案:

1 未来版本更替时,或者以后的新项目再使用到onlyoffice插件或其他插件,优先在后台异步将用户文件转换为xlsx和docx类型文件,预览时使用该类型文件,下载时让其下载源文件即可(是让其下载源文件还是新版本类型的文件更合适需要产品根据现场调研得出结论)

  • 下载源文件风险:下载的版本是xls或doc版本,版本过低,这将意味着系统中磁盘将存储两份用户文件,一份xls一份xlsx,磁盘空间将多耗费原来的一半(一般xls转换为xlsx类型后磁盘占用将缩小一半左右);
  • 下载新版本文件风险:用户电脑word版本停留于2003及以下版本的office将无法查看(此方案下若后台转换失败不可以将源文件删除,要做好事务控制,否则删掉的文件将是不可逆的)

2 用户尽量使用新版本excel进行数据导入,旧版本excel占用更大的空间,解析也会耗费更多的时间,得不偿失

下面是onlyoffice发现问题并找到解决方案的过程

到onlyoffice的demo里面去尝试就能知道它内部转换是什么规则了
在这里插入图片描述
在这里插入图片描述

这一步会转很久,如果传的是xlsx,直接会跳过这一步,立马完成,然后再在系统中尝试对比同样的文件,发现xls和xlsx的预览果然是相差很大,同理doc和docx也是这样的原理
  • 22
    点赞
  • 25
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Vue3本身并没有提供在线预览WordExcel文档的功能,但是可以借助第三方库来实现。 其中比较常用的是使用office-web-viewer库来实现WordExcel文件的在线预览。该库可以通过引入JavaScript文件来实现在线预览WordExcel文件。具体实现方式可以参考官方文档:https://docs.microsoft.com/en-us/office/dev/add-ins/develop/office-online-embedding-office-content-in-an-iframe。 在Vue3中使用office-web-viewer库的步骤为: 1. 在Vue3项目中安装office-web-viewer库: ```bash npm install office-web-viewer --save ``` 2. 在需要预览WordExcel文件的组件中引入office-web-viewer的JavaScript文件: ```html <script src="https://appsforoffice.microsoft.com/lib/1/hosted/Office.js"></script> ``` 3. 在需要预览WordExcel文件的组件中使用office-web-viewer库提供的方法来实现预览功能: ```javascript import OfficeViewer from 'office-web-viewer'; export default { data() { return { fileUrl: 'https://example.com/sample.docx', // WordExcel文件的URL地址 }; }, mounted() { const viewer = new OfficeViewer({ element: '#viewer', // 预览区域的DOM元素ID action: 'view', // 预览的动作,可以是view、print、edit等 fileType: 'docx', // 文件类型,可以是docx、xlsx等 embedAs: 'iframe', // 预览方式,可以是iframe或embed enableMobileFriendly: true, // 是否启用移动端友好模式 supportFullScreen: true, // 是否支持全屏模式 }); viewer.embed(this.fileUrl); // 加载预览WordExcel文件 }, }; ```

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值