【前端】vue实现excel，word，pdf文件预览的思路。

文章目录

• • 背景
  • docx文件预览
  • • • docx编辑
  • xlsx文件预览
  • pdf预览
  • 题外话（在线编辑相关）
  • • 1. onlyoffice
    • 2. docx文件在线编辑。
    • 3. pptx

背景

这两天领导想整个内部文档管理系统，多人协作编辑太麻烦就不做了，简单分享下网页端如何实现excel，word，pdf文件预览。

• 只基于npm库，不依赖于外部平台（比如微软金山之类的url在线预览方式）
• 以下统一使用axios拉取blob文件对象，然后渲染到视图中。

docx文件预览

• 首选”@vue-office/docx”: “^1.6.0”, 效果如下，很流畅
  

docx编辑

可以使用@hufe921/canvas-editor， 但是他的插件@hufe921/canvas-editor-plugin-docx只能基于vue3使用， 所以想实现docx解析和导出的话， 用”mammoth”: “^1.6.0” 和 docx库自己写吧。

xlsx文件预览

• 首选luckeysheet + luckeyexcel, 界面不错，功能多。
• npm install luckeyexcel
• 以下为luckeysheet 2.1.13引入， 把文件下载到public/luckysheet目录下：
  从 https://gitee.com/Ning310975876/ruo-yi-vue-docHub/tree/master/ruoyi-ui/public提取下列文件
  

pdf预览

其实chrome系列浏览器自带预览，不过还是弄一下吧。

• 首选 “vue-pdf-app”: “^2.1.0”,
• https://npmmirror.com/package/vue-pdf-app
• pc上需要隐藏工具栏，太小了。
• 性能不错，快速换页不卡顿，应该做了列表性能优化，不过布局方面感觉是给手机h5做的库。

然后的话， @vue-office/pdf会out of memory， vue-pdf会疯狂报错占用cpu。

    <vue-pdf-app
        :pdf="pdfUrl" pdfUrl可以是url地址或者arrayBuffer文件对象
        theme="light"
        page-scale="page-width"
        :config="{ toolbar: false}"
    />

题外话（在线编辑相关）

1. onlyoffice

属于是很Nice的产品，界面基本一比一还原桌面端应用， 也是我看得最美观的在线office编辑方案，但是服务端臃肿，从头编译需要c++，python， node， java环境，部署需要postgresql，rabbitmq等，官方的docker镜像都快一个多G了。

• 优点：界面美观，功能丰富，高度还原桌面端操作，office系列的文件都能编辑和多人协作。
• 其他：二开费劲，不免费，接口文档纯英文，不好与vue集成, 不同版本的docker镜像部署后，官方vue-demo一堆报错；部署的机器性能太低（2c2g）的话， 历史编辑记录会有一分钟的延迟。
• 当然，有社区版可以体验体验。
  

2. docx文件在线编辑。

网上基本都是 docx解析为html， 然后再转回docx上传到后端的方案。但是转换后会丢失一大堆样式，基本还原不了原有格式。

比较牛逼的大佬是花了一年时间从零开始，用canvas搞的word编辑器，但是公司内部项目不开源。

3. pptx

这玩意儿在线编辑的需求应该比较少吧，没必要弄