前端js实现在线预览pdf、word、xls、ppt等文件

昨天遇到一个需求，公司的视频项目都是视频类型，如果是文件类型就直接打开预览，或者下载查看
项目把请求的资源都作为视频资源处理，直接赋值给 video 标签解析。所以我新增了一个功能函数，方法很简单

文件预览原理：

1. 通过 a 标签直接访问，如果是浏览器支持的文件，可以直接打开预览
   加上 h5 的 download 属性可以实现下载，而不预览。经本人测试，该属性在移动端没效果

2. 前端 iframe 加载资源

<iframe :src="previewUrl" width="100%" height="100%" border="0">

4. pdf.js
   使用方式谷歌搜索几个，本人没用到，就不错介绍了

---

实现方法

// res.data  请求返回的数据
let url = res.data.fileUrl  

// 判断文件类型是 可预览的文件资料
if(isReadingFile(res.data.fileType)) {
	window.open(url)  // 原理和 a 标签打开链接一样
}
function isReadingFile(type) {
	return type == 1 // 与后端协商的判断字段
}

微信浏览器中使用遇到的坑

问题描述：
使用 window.open(url) 方法 本地开发可以预览，在局域网环境中，微信浏览器也可以预览访问。
打包上线后，微信开发者和手机微信浏览器访问预览功能都不生效

处理方法：
改为用 window.location.href=url 方法

---

可参考资料：https://juejin.im/post/5a7badf26fb9a063353198a1