office文档如何在线预览

聪聪_tian

已于 2024-12-02 17:44:34 修改

阅读量1.3k

点赞数 14

文章标签： vue.js js node.js

于 2024-12-02 17:24:04 首次发布

本文链接：https://blog.csdn.net/weixin_39355521/article/details/144193635

版权

浏览器可以预览PDF文档，而常见的word、ppt、excel等文件都不能直接用浏览器打开，实现前端预览office的方案有以下三种：

使用第三方的文档查看服务，如Office Web Viewer：在浏览器中查看 Office 文档 | Microsoft Learn，此方案会把文档链接发送到第三方服务器，可能涉及隐私问题。
前端解析office格式，例如使用vue-office组件来实现文档的前端预览，此方实现简单，渲染速度快，但是访问文件时可能会有跨域问题，还有一个最大的缺点就是兼容性不太好，比如可以解析docx、pptx文档，但是不能解析doc、ppt文件内容。
后端方案，服务端将word、ppt转为pdf返回给前端，前端展示pdf文件内容，该方案除了excel体验不好外，其他文件格式都可以很好的支持，缺点是预览效率低，因为需要服务端先下载远程问文件，再将收集到的文件转为pdf，对服务端压力较大。

最后我采取的方案是方案2和方案3的结合，具体来说，pdf、doc、ppt、excel、xlsx、xls格式文件在前端实现解析和预览，而doc、ppt格式文件传回服务端，在服务端转为pdf返回给前端预览。

vue-office

这个组件可以实现doc、ppt格式的文件预览，使用过程不再赘述，可参考官方文档

501351981/vue-office: 支持word(.docx)、excel(.xlsx,.xls)、pdf、pptx等各类型office文件预览的vue组件集合，提供一站式office文件预览方案，支持vue2和3，也支持React等非Vue框架。Web-based pdf, excel, word, pptx preview library (github.com)github.com/501351981/vue-office

@handsontable/vue

由于vue-office不支持xls格式的excel文档，而且将excel文档解析为pdf也不太合适，所以，我选择了handsontable插件在前端完成对excel的解析。

@handsontable/vue3www.npmjs.com/package/@handsontable/vue3编辑

libreOffice

LibreOffice是一款功能强大的开源的办公软件，可以实现office文档的查看和编辑功能，而且可以通过命令来调用libreOffice的api以实现对文档的操作，下面是利用libreOffice将文档转为pdf的实例：

cd /root
libreoffice --headless --convert-to pdf --outdir /root/output doc1.docx

vue-pdf-embed

这个插件可以实现pdf的预览，使用vue-office也可以预览pdf，但是无法调整分辨率，预览画面有点模糊。

vue-pdf-embed使用非常简单，支持调整页面缩放比例，使用方法如下：

     <Vue-Pdf-Embed
          :annotation-layer="true"
          :scale="1.5"
          text-layer
          :source="src"
          @loading-failed="errorHandler"
          @loaded="renderedHandler"
      />

hrynko/vue-pdf-embed: PDF embed component for Vue 2 and Vue 3 (github.com)github.com/hrynko/vue-pdf-embed