WEB端和微信小程序端的文档文件在线预览方法

文件的在线预览方式汇总

文件在线预览功能可以提高用户体验，值得加入。
一般常见的文件有office套装、pdf、txt、md、和音视频。

• 音视频的预览是单独一块，今天主要说说文档文件的在线预览功能。

• 在手机上，要有好的效果，可以集成使用第三方的文档预览SDK，有效果好操作流程的特点，但是也不属于今天的话题。

一、WEB端在线文件预览

1. 微软office在线预览

最最简单的方式就是使用官方提供的预览链接:
https://view.officeapps.live.com

使用方式如下：
https://view.officeapps.live.com/op/view.aspx?src= 这里放文件链接，注意需要进行url编码

效果展示 - 点击体验预览效果

2. PDF在线预览

通常使用开源的插件，如pdfh5等。
直接将该框架集成到前端项目中即可。
使用方式如下：
pdfh5-master/pdf.html?pdfurl= 这里放文件链接，注意需要进行url编码

部分浏览器已经原生支持pdf的预览功能，如Safari、Chrome等。

3. Markdown在线预览

解决方法同PDF类似，请自行前往开源社区搜索相关插件。

二、微信小程序文件预览

微信小程序端打开web页面需要在该页面所在服务器存放对应的配置文件，所以微软官方的预览链接方式就无法使用了。

这种情况下，可以在服务端使用开源插件对文档进行预览切片，将文件的预览效果保持为一张一张的图片，用户预览时直接加载图片即可。

此方法带来的另一个好处是可以做懒加载和缓存功能，预览过的文件图片可以缓存，再次预览的时候可以快速加载，无需消耗流量。