前端在线预览文档:docx、xlsx、ppt...

468 阅读1分钟

引言

产品:我想在前端预览 word 文档
我:简单,mammoth.js 搞定
产品:不行,太丑了
我:行吧,那直接上 docx-preview
产品:效果不错,可是为什么我的文本框没了
我:呃...这个这个,它不支持
产品:不行,你得实现这个,另外,不只是 word,我还要预览 pptexcel...
我:?!...

线上预览这些类型的文档,存在着不少的限制,很难找到支持完善的库。那么,面对这类需求,我们可以怎么去解决呢?

不妨看看 office 官方提供的免费工具:

  • https://view.officeapps.live.com/op/embed.aspx?src=[公网可访问的文件地址]
  • https://view.officeapps.live.com/op/view.aspx?src=[公网可访问的文件地址]

详情

上面提到的两个 url 属于 Microsoft Office Web Viewer 的一部分,用于嵌入与显示一些复杂的office文件。可以使用iframe或者a标签引入,实现文档在线预览功能。

支持的文件类型如下:

  1. Microsoft Word (.DOCX, .DOCM, .DOTM, .DOTX, .DOC)
  2. Microsoft Excel (.XLSX, .XLSB, .XLS, .XLSM)
  3. Microsoft PowerPoint (.PPTX, .PPSX, .PPT, .PPS, .PPTM, .POTM, .PPAM, .POTX, .PPSM)

embed.aspx

嵌入式预览:界面较为简单,作为预览文档使用

<iframe src="https://view.officeapps.live.com/op/embed.aspx?src=[公网可访问的文件地址]" width="100%" height="800px" frameborder="0"></iframe>

1720145961724.png

view.aspx

在线查看:类似于在线文档,多了一些操作按钮

<a href="https://view.officeapps.live.com/op/view.aspx?src=[公网可访问的文件地址]">在线查看</a>

image.png

更多

产品:真不错,但是我的文档只允许内网访问
我:......