前言
本次项目中需要用到文件预览的部分，踩过很多坑。特此随笔记录一下
预览文件格式有： pdf，img, video。
图片与视频我采用的是原生html+js的方案。后来由于图片预览体验不佳直接找了一份预览插件。
不过多描述。 贴代码:
// 图片预览插件 ↓
<script src="/js/mobile/fly_zomm_img.min.js"></script>
<!-- 預覽 -->
<div id="previewImg">
<img src="#" alt="暂无预览">
</div>
<div id="previewVideo" >
<video src="" autoplay controls></video>
<div style="height: 100%;width: 100%;" id="videoBlank" onclick="hidePreview()"></div>
</div>
js部分
// vue 代码
goPreview:function(item){
var items = item || {},
string4 = item.filePath.replace(/.+\./,"");
if(string4.indexOf('pdf')!== -1){ // pdf 直接跳转pdf.js 预览页面
window.location.href = '/learningMaterials/previewFile?file='+ item.filePath;
}else if(item.fileType === 'video'){ // 视频替换video 标签 URL就行。
$('#previewVideo video').attr('src',ossUrl +item.filePath);
$('#previewVideo').fadeIn(200);
}else{ // 图片 ， 替换dom路径， 预览插件初始化， 模拟点击。
$('#previewImg img').attr('src',ossUrl +item.filePath);
$('#previewImg').FlyZommImg();
$('#previewImg img').click();
}
},
但是最坑的pdf预览部分
我使用的还是大家都爱用的pdf.js;
然后就坑穿了 !
然后就坑穿了 ！
然后就坑穿了 ！
贼生气，作为一个前端小菜鸟。完全没意识到事情的严重性！
官方给的demo完全好用， 下下来自己跑的时候呵呵哒， 各种抛错；
重点来了
- pdf.js 预览必须在http,https域名下才可以正常使用！（node 没试，环境太麻烦赶时间当时）
- 预览pdf文件必须是同源。跨域就boom了。然而我们项目文件都是丢在阿里OSS云存储上的。（默认不支持跨域）
- 官方给的demo如果直接套用的话，dom（比如打印下载按钮之类的）只可以隐藏,“display:none;” 会直接报错。（不嫌麻烦自己一步步搭建可能就不会，天呐！）
请使用：visibility:hidden; - 实在搞不定oss跨域的问题，我白折腾了好久，哪位大佬了解，欢迎告知我。我们最终还是绕开跨域问题，每次用户第一次访问页面时我都向后台发送一次请求，把文件列表url发送至后台，后台就开始下载到本地服务器，该项目由于用户量大，后台需判断是否已经下载，已下载就忽略请求。并且保证用户体验情况下，每日定时清除服务器上的文件。
