前端文件预览的问题总结（1）

前言
本次项目中需要用到文件预览的部分，踩过很多坑。特此随笔记录一下
预览文件格式有： pdf，img, video。
图片与视频我采用的是原生html+js的方案。后来由于图片预览体验不佳直接找了一份预览插件。
不过多描述。 贴代码:

  //  图片预览插件 ↓



    


    
    

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;

http://mozilla.github.io/pdf.js/

然后就坑穿了 !
然后就坑穿了 ！
然后就坑穿了 ！
贼生气，作为一个前端小菜鸟。完全没意识到事情的严重性！
官方给的demo完全好用， 下下来自己跑的时候呵呵哒， 各种抛错；

重点来了

1. pdf.js 预览必须在http,https域名下才可以正常使用！（node 没试，环境太麻烦赶时间当时）
2. 预览pdf文件必须是同源。跨域就boom了。然而我们项目文件都是丢在阿里OSS云存储上的。（默认不支持跨域）
3. 官方给的demo如果直接套用的话，dom（比如打印下载按钮之类的）只可以隐藏,“display:none;” 会直接报错。（不嫌麻烦自己一步步搭建可能就不会，天呐！）
   请使用：visibility:hidden;
4. 实在搞不定oss跨域的问题，我白折腾了好久，哪位大佬了解，欢迎告知我。我们最终还是绕开跨域问题，每次用户第一次访问页面时我都向后台发送一次请求，把文件列表url发送至后台，后台就开始下载到本地服务器，该项目由于用户量大，后台需判断是否已经下载，已下载就忽略请求。并且保证用户体验情况下，每日定时清除服务器上的文件。

以上就是本人在pdf.js上遇到的一路坑总结下的问题。 相信大家肯定有更好的解决方法。谢谢观看！